vendure/packages/dashboard/vite/vite-plugin-theme.ts

import { Plugin } from 'vite';

/**
 * Shared color palette used across light and dark themes.
 * Extracting these reduces duplication and makes theme relationships clearer.
 */
const COLORS = {
    // Primary brand color
    primary: 'oklch(0.7613 0.1503 231.1314)',
    // Pure white/black variants
    white: 'oklch(1.0000 0 0)',
    nearWhite: 'oklch(0.9851 0 0)',
    // Gray scale - light theme
    lightForeground: 'oklch(0.2103 0.0059 285.8852)',
    lightMuted: 'oklch(0.9674 0.0013 286.3752)',
    lightMutedForeground: 'oklch(0.5517 0.0138 285.9385)',
    lightBorder: 'oklch(0.9197 0.0040 286.3202)',
    // Gray scale - dark theme
    darkBackground: 'oklch(0.1408 0.0044 285.8229)',
    darkCard: 'oklch(0.2103 0.0059 285.8852)',
    darkMuted: 'oklch(0.2739 0.0055 286.0326)',
    darkMutedForeground: 'oklch(0.7118 0.0129 286.0665)',
    // Brand colors (shared)
    brand: '#17c1ff',
    brandLighter: '#e6f9ff',
    brandDarker: '#0099ff',
    // Fonts (shared)
    fontSans: 'Inter, sans-serif',
    fontMono: 'Geist Mono, monospace',
} as const;

type ThemeColors = {
    background?: string;
    foreground?: string;
    card?: string;
    'card-foreground'?: string;
    popover?: string;
    'popover-foreground'?: string;
    primary?: string;
    'primary-foreground'?: string;
    secondary?: string;
    'secondary-foreground'?: string;
    muted?: string;
    'muted-foreground'?: string;
    accent?: string;
    'accent-foreground'?: string;
    destructive?: string;
    'destructive-foreground'?: string;
    success?: string;
    'success-foreground'?: string;
    'dev-mode'?: string;
    'dev-mode-foreground'?: string;
    border?: string;
    input?: string;
    ring?: string;
    'chart-1'?: string;
    'chart-2'?: string;
    'chart-3'?: string;
    'chart-4'?: string;
    'chart-5'?: string;
    radius?: string;
    sidebar?: string;
    'sidebar-foreground'?: string;
    'sidebar-primary'?: string;
    'sidebar-primary-foreground'?: string;
    'sidebar-accent'?: string;
    'sidebar-accent-foreground'?: string;
    'sidebar-border'?: string;
    'sidebar-ring'?: string;
    brand?: string;
    'brand-lighter'?: string;
    'brand-darker'?: string;
    'font-sans'?: string;
    'font-mono'?: string;
    [key: string]: string | undefined;
};

export interface ThemeVariables {
    light?: ThemeColors;
    dark?: ThemeColors;
}

const defaultVariables: ThemeVariables = {
    light: {
        background: COLORS.white,
        foreground: COLORS.lightForeground,
        card: COLORS.white,
        'card-foreground': COLORS.lightForeground,
        popover: COLORS.white,
        'popover-foreground': COLORS.lightForeground,
        primary: COLORS.primary,
        'primary-foreground': 'oklch(0.261 0.043 218.379)',
        secondary: COLORS.lightMuted,
        'secondary-foreground': COLORS.lightForeground,
        muted: COLORS.lightMuted,
        'muted-foreground': COLORS.lightMutedForeground,
        accent: COLORS.lightMuted,
        'accent-foreground': COLORS.lightForeground,
        // L=0.60 ensures WCAG AA contrast ratio (4.5:1) against white backgrounds
        destructive: 'oklch(0.60 0.24 27.325)',
        'destructive-foreground': COLORS.nearWhite,
        success: 'hsl(99deg 67.25% 33.2%)',
        'success-foreground': 'hsl(0 0% 98%)',
        'dev-mode': 'hsl(204, 76%, 62%)',
        'dev-mode-foreground': 'hsl(0 0% 98%)',
        border: COLORS.lightBorder,
        input: COLORS.lightBorder,
        ring: COLORS.primary,
        'chart-1': COLORS.primary,
        'chart-2': 'oklch(0.5575 0.2525 302.3212)',
        'chart-3': 'oklch(0.5858 0.2220 17.5846)',
        'chart-4': 'oklch(0.6658 0.1574 58.3183)',
        'chart-5': 'oklch(0.6271 0.1699 149.2138)',
        radius: '0.375rem',
        sidebar: COLORS.lightMuted,
        'sidebar-foreground': COLORS.lightForeground,
        'sidebar-primary': COLORS.primary,
        'sidebar-primary-foreground': COLORS.darkBackground,
        'sidebar-accent': COLORS.white,
        'sidebar-accent-foreground': COLORS.lightForeground,
        'sidebar-border': COLORS.lightBorder,
        'sidebar-ring': COLORS.primary,
        brand: COLORS.brand,
        'brand-lighter': COLORS.brandLighter,
        'brand-darker': COLORS.brandDarker,
        'font-sans': COLORS.fontSans,
        'font-mono': COLORS.fontMono,
    },
    dark: {
        background: COLORS.darkBackground,
        foreground: COLORS.nearWhite,
        card: COLORS.darkCard,
        'card-foreground': COLORS.nearWhite,
        popover: COLORS.darkCard,
        'popover-foreground': COLORS.nearWhite,
        primary: COLORS.primary,
        'primary-foreground': COLORS.darkBackground,
        secondary: COLORS.darkMuted,
        'secondary-foreground': COLORS.nearWhite,
        muted: COLORS.darkMuted,
        'muted-foreground': COLORS.darkMutedForeground,
        accent: COLORS.darkMuted,
        'accent-foreground': COLORS.nearWhite,
        // L=0.75 ensures WCAG AA contrast ratio (4.5:1) against dark backgrounds
        destructive: 'oklch(0.75 0.22 25)',
        'destructive-foreground': COLORS.nearWhite,
        success: 'hsl(100 76.42% 22.21%)',
        'success-foreground': 'hsl(0 0% 98%)',
        'dev-mode': 'hsl(204, 86%, 53%)',
        'dev-mode-foreground': 'hsl(0 0% 98%)',
        border: COLORS.darkMuted,
        input: COLORS.darkMuted,
        ring: COLORS.primary,
        'chart-1': COLORS.primary,
        'chart-2': 'oklch(0.6268 0.2325 303.9004)',
        'chart-3': 'oklch(0.6450 0.2154 16.4393)',
        'chart-4': 'oklch(0.7686 0.1647 70.0804)',
        'chart-5': 'oklch(0.7227 0.1920 149.5793)',
        sidebar: 'oklch(0.2 0 0)',
        'sidebar-foreground': COLORS.nearWhite,
        'sidebar-primary': COLORS.primary,
        'sidebar-primary-foreground': COLORS.darkBackground,
        'sidebar-accent': COLORS.darkMuted,
        'sidebar-accent-foreground': COLORS.nearWhite,
        'sidebar-border': COLORS.darkMuted,
        'sidebar-ring': COLORS.primary,
        brand: COLORS.brand,
        'brand-lighter': COLORS.brandLighter,
        'brand-darker': COLORS.brandDarker,
        'font-sans': COLORS.fontSans,
        'font-mono': COLORS.fontMono,
    },
};

export type ThemeVariablesPluginOptions = {
    theme?: ThemeVariables;
};

/**
 * Converts a theme colors object into CSS custom property declarations.
 */
function generateCssVariables(theme: ThemeColors): string {
    return Object.entries(theme)
        .filter(([_, value]) => value !== undefined)
        .map(([key, value]) => `--${key}: ${value as string};`)
        .join('\n');
}

export function themeVariablesPlugin(options: ThemeVariablesPluginOptions): Plugin {
    const virtualModuleId = 'virtual:admin-theme';
    const resolvedVirtualModuleId = `\0${virtualModuleId}`;

    return {
        name: 'vendure:admin-theme',
        enforce: 'pre', // This ensures our plugin runs before other CSS processors
        transform(code, id) {
            // Only transform CSS files
            if (!id.endsWith('styles.css')) {
                return null;
            }

            // Replace the @import 'virtual:admin-theme'; with our theme variables
            if (
                code.includes('@import "virtual:admin-theme";') ||
                code.includes("@import 'virtual:admin-theme';")
            ) {
                const lightTheme = options.theme?.light || {};
                const darkTheme = options.theme?.dark || {};

                // Merge default themes with custom themes
                const mergedLightTheme = { ...defaultVariables.light, ...lightTheme };
                const mergedDarkTheme = { ...defaultVariables.dark, ...darkTheme };

                const themeCSS = `
                    :root {
                        ${generateCssVariables(mergedLightTheme)}
                    }

                    .dark {
                        ${generateCssVariables(mergedDarkTheme)}
                    }
                `;

                return code.replace(/@import ['"]virtual:admin-theme['"];?/, themeCSS);
            }

            return null;
        },
    };
}