viewfinder/packages/base/src/plugin-tailwind.ts

import tailwindPlugin from 'tailwindcss/plugin';

export interface ViewfinderPluginOptions {
	baseWidth?: number;
	topbarHeight?: string;
	sizeMenu?: string;
	colorBackground?: string;
}

export const plugin = tailwindPlugin.withOptions<ViewfinderPluginOptions>(
	({
		baseWidth = 360 as const,
		topbarHeight = '4rem' as const,
		sizeMenu = topbarHeight,
		colorBackground = '255 255 255' as const,
	} = {} as ViewfinderPluginOptions) => ({
		addBase,
		addComponents,
		addUtilities,
	}) => {
		addBase({
			':root': {
				'--base-width': `${baseWidth}px`,
				'--height-topbar': topbarHeight,
				'--size-menu': sizeMenu,
				'--color-background': colorBackground,
			},
		});
		addBase({
			':root': {
				'background-color': 'rgb(var(--color-background))',
			},
		});
		addComponents({
			'.topbar': {
				height: 'var(--height-topbar, 4rem)',
				'& ~ *': {
					'padding-top': 'var(--height-topbar, 4rem)',
				},
				'& ~ [data-viewfinder="main"] ~ *': {
					'padding-top': '0',
				},
				'& [data-viewfinder="menu"] > *': {
					'width': '100%',
					'height': '100%',
					'display': 'grid',
					'place-content': 'center',
				},
				'& [data-viewfinder="user"] > *': {
					'width': '100%',
					'height': '100%',
					'display': 'grid',
					'place-content': 'center',
				},
				[`@media (min-width: ${baseWidth * 3}px)`]: {
					'& ~ [data-viewfinder="main"] ~ *': {
						'padding-top': 'var(--height-topbar, 4rem)',
					},
					'& [data-viewfinder="menu"] > *': {
						'position': 'absolute',
						'left': '-999999px',
					},
					'& [data-viewfinder="menu"] > *:focus': {
						'position': 'static',
					},
				},
			},
		});
		addUtilities({
			'.scrollbar-hidden': {
				'scrollbar-width': 'none',
				'&::-webkit-scrollbar': {
					'display': 'none',
				},
			},
		});
		addComponents({
			'.left-sidebar-with-menu-base': {
				'& [data-viewfinder="menu-item"] > *': {
					'height': '100%',
					'display': 'flex',
					'align-items': 'center',
					'text-decoration': 'none',
					'width': '100%',
				},
				[`@media (min-width: ${baseWidth * 3}px)`]: {
					'& [data-viewfinder="menu-item"]': {
						'width': 'auto !important',
					},
					'& [data-viewfinder="menu-item"] > *': {
						'height': 'auto',
					},
				},
			},
		});
	},
	({
		baseWidth = 360 as const,
	} = {} as ViewfinderPluginOptions) => ({
		theme: {
			screens: {
				'3xs': `${baseWidth}px`,
				'2xs': `${baseWidth * 1.5}px`,
				xs: `${baseWidth * 2}px`,
				sm: `${baseWidth * 2.5}px`,
				md: `${baseWidth * 3}px`,
				lg: `${baseWidth * 4}px`,
				xl: `${baseWidth * 5}px`,
				'2xl': `${baseWidth * 6}px`,
				'3xl': `${baseWidth * 7}px`,
			},
			extend: {
				colors: {
					bg: 'rgb(var(--color-background))',
				},
				spacing: {
					topbar: 'var(--height-topbar, 4rem)',
					menu: 'var(--size-menu, var(--height-topbar, 4rem))',
					inherit: 'inherit',
				},
				maxWidth: {
					'screen-3xs': `${baseWidth}px`,
					'screen-2xs': `${baseWidth * 1.5}px`,
					'screen-xs': `${baseWidth * 2}px`,
					'screen-sm': `${baseWidth * 2.5}px`,
					'screen-md': `${baseWidth * 3}px`,
					'screen-lg': `${baseWidth * 4}px`,
					'screen-xl': `${baseWidth * 5}px`,
					'screen-2xl': `${baseWidth * 6}px`,
					'screen-3xl': `${baseWidth * 7}px`,
				},
				minWidth: {
					32: '8rem',
				},
			},
		},
	}),
);