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