// uno.config.ts // import type { Theme } from '@unocss/preset-mini' import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives, transformerVariantGroup, } from "unocss"; import { presetDaisy } from "unocss-preset-daisy"; export default defineConfig({ cli: { entry: { // Scan all Rust files for CSS classes // This ensures utilities like px, py, flex, grid, etc. are discovered patterns: [ // Main crates "crates/client/src/**/*.rs", "crates/server/src/**/*.rs", "crates/shared/src/**/*.rs", "crates/components/src/**/*.rs", "crates/pages/src/**/*.rs", // Also scan any external rustelo component crates (e.g., from workspace) "../../rustelo/code/crates/**/*.rs", // HTMX Minijinja templates — project and framework "crates/pages_htmx/templates/**/*.j2", "../../rustelo/code/crates/foundation/crates/rustelo_pages_htmx/templates/**/*.j2", ], outFile: "site/public/styles/website.css", }, }, // Safelist critical utilities and design system classes safelist: [ // Core utilities "flex", "grid", "inline-flex", "inline-grid", "justify-center", "items-center", "gap-1", "gap-2", "gap-3", "gap-4", "gap-6", "p-1", "p-2", "p-3", "p-4", "p-6", "p-8", "px-1", "px-2", "px-3", "px-4", "px-6", "px-8", "py-1", "py-2", "py-3", "py-4", "py-6", "py-8", "m-1", "m-2", "m-3", "m-4", "m-6", "m-8", "mx-auto", "my-auto", "mb-2", "mb-3", "mb-4", "mb-6", "mt-2", "mt-4", "text-center", "text-left", "text-right", "w-full", "h-full", "h-12", "h-14", "h-15", "h-16", "h-20", "h-24", "h-28", "h-32", "h-36", "h-40", "h-48", "min-h-screen", "object-contain", "object-cover", "rounded", "rounded-md", "rounded-lg", "rounded-xl", "rounded-full", "border", "border-2", "border-solid", "shadow", "shadow-sm", "shadow-md", "shadow-lg", "bg-white", "bg-black", "dark:bg-slate-900", "dark:bg-gray-800", "dark:bg-gray-700", "border-gray-200", "dark:border-gray-700", "text-white", "text-black", "text-gray-700", "dark:text-gray-300", "opacity-50", "opacity-75", "opacity-100", // Filter classes "filter-selected", "filter-hidden", ], // Include design system CSS layers: { "design-system": -1, components: 0, utilities: 1, }, shortcuts: [ { // Design System Button Components "ds-btn": "inline-flex items-center justify-center font-[var(--font-medium)] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-none cursor-pointer no-underline", "ds-btn-sm": "ds-btn px-[var(--space-3)] py-[var(--space-1-5)] text-[var(--text-sm)] rounded-[var(--radius-md)]", "ds-btn-md": "ds-btn px-[var(--space-4)] py-[var(--space-2)] text-[var(--text-sm)] rounded-[var(--radius-md)]", "ds-btn-lg": "ds-btn px-[var(--space-6)] py-[var(--space-3)] text-[var(--text-base)] rounded-[var(--radius-md)]", "ds-btn-primary": "ds-btn-md bg-[var(--color-brand-primary)] text-[var(--color-neutral-50)] hover:bg-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]/20", "ds-btn-secondary": "ds-btn-md bg-[var(--color-neutral-200)] text-[var(--color-neutral-900)] hover:bg-[var(--color-neutral-300)] focus:ring-[var(--color-neutral-200)]/20", "ds-btn-ghost": "ds-btn-md bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]", "ds-btn-ghost-sm": "ds-btn-sm bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]", "ds-btn-danger": "ds-btn-md bg-[var(--color-error)] text-[var(--color-neutral-50)] hover:bg-[var(--color-error)] focus:ring-[var(--color-error)]/20", "ds-btn-content-category-filter": "ds-btn-md bg-transparent text-[var(--color-neutral-700)] hover:bg-[var(--color-neutral-100)] dark:text-[var(--color-neutral-300)] dark:hover:bg-[var(--color-neutral-800)]", // Design System Navigation Components "ds-nav-link": "no-underline font-[var(--font-sans)] antialiased text-[var(--text-sm)] text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)] flex items-center gap-x-[var(--space-2)] p-[var(--space-1)] hover:text-[var(--color-brand-primary)] transition-colors duration-200", "ds-nav-link-active": "ds-nav-link text-[var(--color-brand-primary)]", // Sidebar/vertical nav item — no justify-center, no DaisyUI btn, no browser border "ds-nav-item": "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm font-medium border-none cursor-pointer no-underline transition-colors text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)] bg-transparent", "ds-nav-item-active": "flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm font-medium border-none cursor-pointer no-underline bg-[var(--color-brand-primary)] text-[var(--color-neutral-50)] dark:text-[var(--color-neutral-50)]", // Design System Card Components "ds-card": "bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-800)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] border border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-600)] p-[var(--space-6)]", "ds-card-hover": "ds-card hover:shadow-[var(--shadow-md)] transition-shadow duration-200", "ds-card-title": "ds-heading-4 ds-text mb-2 text-balance sm:ds-heading-3 mb-ds-4", "ds-card-subtitle": "ds-heading-3 ds-text mb-2 text-balance sm:ds-heading-2 mb-ds-3", "ds-card-featured": "inline-flex items-end px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors", "ds-card-text": "ds-text-secondary ds-body max-w-2xl mx-auto", // Design System Form Components "ds-input": "w-full px-[var(--space-3)] py-[var(--space-2)] text-[var(--text-sm)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)] border border-[var(--color-neutral-300)] dark:border-[var(--color-neutral-600)] rounded-[var(--radius-md)] bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-800)] transition-colors duration-200 focus:outline-none focus:ring-2 focus:border-[var(--color-brand-primary)] focus:ring-[var(--color-brand-primary)]/20", "ds-textarea": "ds-input min-h-[6rem] resize-y", "ds-select": "ds-input cursor-pointer", // Design System Badge Components "ds-badge": "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors", "ds-badge-primary": "ds-badge bg-[var(--color-brand-primary)] text-white hover:bg-[var(--color-brand-primary)]/90", "ds-badge-secondary": "ds-badge bg-[var(--color-brand-secondary)] text-white hover:bg-[var(--color-brand-secondary)]/90", "ds-badge-outline": "ds-badge border border-[var(--color-neutral-300)] dark:border-[var(--color-neutral-600)] bg-transparent text-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)]", "ds-badge-ghost": "ds-badge bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-800)] text-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)] hover:bg-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]", "ds-badge-sm": "text-xs px-2 py-0.5", "ds-badge-neutral": "ds-badge bg-[var(--color-neutral-200)] text-[var(--color-neutral-700)] dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] hover:opacity-90", "ds-badge-accent": "ds-badge bg-[var(--color-success)] text-white hover:bg-[var(--color-success)]/90", "ds-badge-primary-focus": "bg-[var(--color-brand-primary)]/80 text-white", // Design System Theme Toggle "ds-theme-toggle": "ds-btn p-[var(--space-2)] text-[var(--text-sm)] bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-900)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)] border border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)] rounded-[var(--radius-lg)] hover:bg-[var(--color-neutral-100)] dark:hover:bg-[var(--color-neutral-800)] focus:ring-[var(--color-brand-primary)]/20", // Design System Layout & Background Components "ds-bg": "bg-[var(--color-neutral-50)] dark:bg-[var(--color-neutral-950)]", "ds-bg-secondary": "bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-800)]", "ds-bg-page": "bg-[var(--color-neutral-100)] dark:bg-[var(--color-neutral-900)]", "ds-bg-muted": "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-600)]", "ds-bg-overlay": "bg-[var(--color-neutral-600)] bg-opacity-50 dark:bg-[var(--color-neutral-800)] dark:bg-opacity-75", // Design System Text Components "ds-text": "text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)]", "ds-text-secondary": "text-[var(--color-neutral-600)] dark:text-[var(--color-neutral-400)]", "ds-text-muted": "text-[var(--color-neutral-500)] dark:text-[var(--color-neutral-500)]", // Design System Typography Scale "ds-text-xs": "text-[var(--text-xs)] leading-[var(--leading-tight)]", "ds-text-sm": "text-[var(--text-sm)] leading-[var(--leading-normal)]", "ds-text-base": "text-[var(--text-base)] leading-[var(--leading-normal)]", "ds-text-lg": "text-[var(--text-lg)] leading-[var(--leading-relaxed)]", "ds-text-xl": "text-[var(--text-xl)] leading-[var(--leading-relaxed)]", "ds-text-2xl": "text-[var(--text-2xl)] leading-[var(--leading-tight)]", "ds-text-3xl": "text-[var(--text-3xl)] leading-[var(--leading-tight)]", "ds-text-4xl": "text-[var(--text-4xl)] leading-[var(--leading-tight)]", // Design System Border Components "ds-border": "border-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]", "ds-border-light": "border-[var(--color-neutral-100)] dark:border-[var(--color-neutral-800)]", // Design System Shadow Components "ds-shadow-sm": "shadow-[var(--shadow-sm)]", "ds-shadow": "shadow-[var(--shadow-base)]", "ds-shadow-md": "shadow-[var(--shadow-md)]", "ds-shadow-lg": "shadow-[var(--shadow-lg)]", // Design System Rounded Components "ds-rounded-sm": "rounded-[var(--radius-sm)]", "ds-rounded": "rounded-[var(--radius-base)]", "ds-rounded-md": "rounded-[var(--radius-md)]", "ds-rounded-lg": "rounded-[var(--radius-lg)]", "ds-rounded-xl": "rounded-[var(--radius-xl)]", // Design System Complete Patterns "ds-page": "ds-bg-page font-[var(--font-sans)] text-[var(--color-neutral-900)] dark:text-[var(--color-neutral-50)]", "ds-heading-1": "ds-text-4xl font-[var(--font-bold)] ds-text mb-[var(--space-6)]", "ds-heading-2": "ds-text-3xl font-[var(--font-semibold)] ds-text mb-[var(--space-4)]", "ds-heading-3": "ds-text-2xl font-[var(--font-semibold)] ds-text mb-[var(--space-4)]", "ds-heading-4": "ds-text-xl font-[var(--font-semibold)] ds-text mb-[var(--space-3)]", "ds-body": "ds-text-base ds-text-secondary mb-[var(--space-4)] leading-[var(--leading-relaxed)]", "ds-caption": "ds-text-sm ds-text-muted", // Responsive Container System "ds-container": "mx-auto px-[var(--space-4)] max-w-7xl", "ds-container-sm": "mx-auto px-[var(--space-4)] max-w-2xl", "ds-container-md": "mx-auto px-[var(--space-4)] max-w-4xl", "ds-container-lg": "mx-auto px-[var(--space-4)] max-w-6xl", // Legacy compatibility (marked for deprecation) "theme-bg": "ds-bg", "theme-bg-secondary": "ds-bg-secondary", "theme-bg-page": "ds-bg-page", "theme-text": "ds-text", "theme-text-secondary": "ds-text-secondary", "theme-text-muted": "ds-text-muted", "theme-border": "ds-border", "theme-card": "ds-card", "theme-toggle": "ds-theme-toggle", "nav-link": "ds-nav-link", // Standard utility classes for compatibility round: "rounded-full", rounded: "rounded-md", "rounded-sm": "rounded-sm", "rounded-lg": "rounded-lg", "rounded-xl": "rounded-xl", "rounded-2xl": "rounded-2xl", "rounded-3xl": "rounded-3xl", "rounded-full": "rounded-full", "rounded-none": "rounded-none", // Shadow utilities shadow: "shadow-md", "shadow-sm": "shadow-sm", "shadow-lg": "shadow-lg", "shadow-xl": "shadow-xl", "shadow-none": "shadow-none", // Common spacing "m-auto": "mx-auto my-auto", "mx-auto": "mx-auto", "text-center": "text-center", "text-left": "text-left", "text-right": "text-right", // Legacy shortcuts (maintain compatibility) btn: "px-4 py-1 rounded inline-block bg-primary text-white cursor-pointer tracking-wide op90 hover:op100 disabled:cursor-default disabled:bg-gray-600 disabled:!op50 disabled:pointer-events-none", "indigo-btn": "ml-5 capitalize !text-2xl !text-indigo-800 !bg-indigo-200 border-0.5 !border-indigo-500 dark:!text-indigo-200 dark:!bg-indigo-800 hover:!bg-gray-100 dark:hover:!bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg font-bold !p-5 md:!p-8", "icon-btn": "text-1.2em cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary disabled:pointer-events-none", "square-btn": "flex flex-gap-2 items-center border border-base px2 py1 relative !outline-none", "square-btn-mark": "absolute h-2 w-2 bg-primary -right-0.2rem -top-0.2rem", "bg-base": "bg-white dark:bg-[#121212]", "bg-overlay": "bg-[#eee]:50 dark:bg-[#222]:50", "bg-header": "bg-gray-500:5", "bg-active": "bg-gray-500:8", "bg-hover": "bg-gray-500:20", "border-base": "border-gray-400:10", "tab-button": "font-light op50 hover:op80 h-full px-4", "tab-button-active": "op100 bg-gray-500:10", }, [/^(flex|grid)-center/g, () => "justify-center items-center"], [/^(flex|grid)-x-center/g, () => "justify-center"], [/^(flex|grid)-y-center/g, () => "items-center"], ], rules: [ ["max-h-screen", { "max-height": "calc(var(--vh, 1vh) * 100)" }], ["h-screen", { height: "calc(var(--vh, 1vh) * 100)" }], ], // theme: { theme: { colors: { // Legacy colors (maintain compatibility) ok: "var(--c-ok)", primary: "var(--c-primary)", "primary-deep": "var(--c-primary-deep)", mis: "var(--c-mis)", // Design System Brand Colors "ds-brand-primary": "var(--color-brand-primary, #3b82f6)", "ds-brand-secondary": "var(--color-brand-secondary, #6366f1)", "ds-brand-accent": "var(--color-brand-accent, #f59e0b)", // Design System Semantic Colors "ds-success": "var(--color-success, #10b981)", "ds-warning": "var(--color-warning, #f59e0b)", "ds-error": "var(--color-error, #ef4444)", "ds-info": "var(--color-info, #06b6d4)", // Design System Neutral Scale "ds-neutral-50": "var(--color-neutral-50, #f9fafb)", "ds-neutral-100": "var(--color-neutral-100, #f3f4f6)", "ds-neutral-200": "var(--color-neutral-200, #e5e7eb)", "ds-neutral-300": "var(--color-neutral-300, #d1d5db)", "ds-neutral-400": "var(--color-neutral-400, #9ca3af)", "ds-neutral-500": "var(--color-neutral-500, #6b7280)", "ds-neutral-600": "var(--color-neutral-600, #4b5563)", "ds-neutral-700": "var(--color-neutral-700, #374151)", "ds-neutral-800": "var(--color-neutral-800, #1f2937)", "ds-neutral-900": "var(--color-neutral-900, #111827)", "ds-neutral-950": "var(--color-neutral-950, #030712)", // Legacy theme colors (marked for deprecation) "theme-primary": "var(--color-brand-primary, #3b82f6)", "theme-secondary": "var(--color-brand-secondary, #6366f1)", "theme-success": "var(--color-success, #10b981)", "theme-error": "var(--color-error, #ef4444)", }, spacing: { // Design System Spacing Scale "ds-0": "var(--space-0, 0)", "ds-px": "var(--space-px, 1px)", "ds-0.5": "var(--space-0-5, 0.125rem)", "ds-1": "var(--space-1, 0.25rem)", "ds-1.5": "var(--space-1-5, 0.375rem)", "ds-2": "var(--space-2, 0.5rem)", "ds-2.5": "var(--space-2-5, 0.625rem)", "ds-3": "var(--space-3, 0.75rem)", "ds-4": "var(--space-4, 1rem)", "ds-5": "var(--space-5, 1.25rem)", "ds-6": "var(--space-6, 1.5rem)", "ds-8": "var(--space-8, 2rem)", "ds-10": "var(--space-10, 2.5rem)", "ds-12": "var(--space-12, 3rem)", "ds-16": "var(--space-16, 4rem)", "ds-20": "var(--space-20, 5rem)", "ds-24": "var(--space-24, 6rem)", "ds-32": "var(--space-32, 8rem)", "ds-40": "var(--space-40, 10rem)", "ds-48": "var(--space-48, 12rem)", "ds-56": "var(--space-56, 14rem)", "ds-64": "var(--space-64, 16rem)", "ds-80": "var(--space-80, 20rem)", "ds-96": "var(--space-96, 24rem)", // Legacy spacing (marked for deprecation) "theme-xs": "var(--space-1, 0.25rem)", "theme-sm": "var(--space-2, 0.5rem)", "theme-md": "var(--space-4, 1rem)", "theme-lg": "var(--space-6, 1.5rem)", "theme-xl": "var(--space-8, 2rem)", }, borderRadius: { // Design System Border Radius "ds-none": "var(--radius-none, 0)", "ds-sm": "var(--radius-sm, 0.125rem)", "ds-base": "var(--radius-base, 0.25rem)", "ds-md": "var(--radius-md, 0.375rem)", "ds-lg": "var(--radius-lg, 0.5rem)", "ds-xl": "var(--radius-xl, 0.75rem)", "ds-2xl": "var(--radius-2xl, 1rem)", "ds-3xl": "var(--radius-3xl, 1.5rem)", "ds-full": "var(--radius-full, 9999px)", // Legacy radius (marked for deprecation) "theme-sm": "var(--radius-sm, 0.125rem)", "theme-md": "var(--radius-md, 0.375rem)", "theme-lg": "var(--radius-lg, 0.5rem)", "theme-xl": "var(--radius-xl, 0.75rem)", }, fontFamily: { // Design System Typography "ds-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)", "ds-serif": "var(--font-serif, ui-serif, Georgia, serif)", "ds-mono": "var(--font-mono, ui-monospace, 'Cascadia Code', monospace)", // Legacy fonts (marked for deprecation) "theme-sans": "var(--font-sans, ui-sans-serif, system-ui, sans-serif)", "theme-mono": "var(--font-mono, ui-monospace, 'Cascadia Code', monospace)", }, others: { "dd-list": "w-2 h-2 ds-bg-muted ds-rounded-full mt-6 flex-shrink-0", }, fontSize: { // Design System Typography Scale "ds-xs": "var(--text-xs, 0.75rem)", "ds-sm": "var(--text-sm, 0.875rem)", "ds-base": "var(--text-base, 1rem)", "ds-lg": "var(--text-lg, 1.125rem)", "ds-xl": "var(--text-xl, 1.25rem)", "ds-2xl": "var(--text-2xl, 1.5rem)", "ds-3xl": "var(--text-3xl, 1.875rem)", "ds-4xl": "var(--text-4xl, 2.25rem)", "ds-5xl": "var(--text-5xl, 3rem)", "ds-6xl": "var(--text-6xl, 3.75rem)", }, fontWeight: { // Design System Font Weights "ds-thin": "var(--font-thin, 100)", "ds-light": "var(--font-light, 300)", "ds-normal": "var(--font-normal, 400)", "ds-medium": "var(--font-medium, 500)", "ds-semibold": "var(--font-semibold, 600)", "ds-bold": "var(--font-bold, 700)", "ds-extrabold": "var(--font-extrabold, 800)", "ds-black": "var(--font-black, 900)", }, }, presets: [ presetUno(), presetAttributify(), presetIcons({ scale: 1.2, autoInstall: true, collections: { carbon: () => import("@iconify-json/carbon/icons.json").then((i) => i.default), }, }), presetTypography(), presetDaisy(), ], // Custom CSS for code blocks and syntax highlighting preflights: [ { getCSS: () => ` /* Global Font */ body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* Code Block Styling - Light and Dark Theme Support */ /* CSS Variables for Code Blocks */ :root { /* Light theme code colors */ --code-bg: #f8fafc; --code-border: #e2e8f0; --code-text: #334155; --code-comment: #64748b; --code-keyword: #0f172a; --code-string: #059669; --code-number: #dc2626; --code-function: #2563eb; --code-variable: #7c3aed; --inline-code-bg: #f1f5f9; --inline-code-text: #475569; } .dark { /* Dark theme code colors */ --code-bg: #1e293b; --code-border: #334155; --code-text: #e2e8f0; --code-comment: #94a3b8; --code-keyword: #f8fafc; --code-string: #34d399; --code-number: #fca5a5; --code-function: #60a5fa; --code-variable: #a78bfa; --inline-code-bg: #374151; --inline-code-text: #d1d5db; } /* Pre elements (code blocks) */ pre { background-color: var(--code-bg) !important; border: 1px solid var(--code-border); border-radius: var(--radius-md, 0.375rem); padding: 1.25rem 1.5rem; margin: 1.5rem 0; overflow-x: auto; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.875rem; position: relative; } /* Code elements inside pre (code blocks) */ pre code { background-color: transparent !important; padding: 0 !important; border-radius: 0; color: var(--code-text); font-size: inherit; font-weight: 400; } /* Inline code elements */ code:not(pre code) { background-color: var(--inline-code-bg) !important; color: var(--inline-code-text) !important; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm, 0.125rem); font-size: 0.875em; font-weight: 500; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; border: 1px solid var(--code-border); } /* Remove backticks from UnoCSS prose */ :is([prose=""], .prose) :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::before, :is([prose=""], .prose) :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::after { content: "" !important; } /* Override highlight.js default styles to use our theme variables */ .hljs { background: var(--code-bg) !important; color: var(--code-text) !important; } /* Scrollbar styling for code blocks */ pre::-webkit-scrollbar { height: 8px; } pre::-webkit-scrollbar-track { background: transparent; } pre::-webkit-scrollbar-thumb { background-color: var(--code-border); border-radius: 4px; } pre::-webkit-scrollbar-thumb:hover { background-color: var(--code-comment); } /* Dark theme scrollbar */ .dark pre::-webkit-scrollbar-thumb { background-color: var(--color-neutral-600); } .dark pre::-webkit-scrollbar-thumb:hover { background-color: var(--color-neutral-500); } /* Enhanced code block with better spacing for blog posts */ .prose pre, [prose=""] pre { margin: 2rem 0 !important; line-height: 1.7; } .prose code, [prose=""] code { font-size: 0.875em; } /* Responsive adjustments */ @media (max-width: 768px) { pre { padding: 1rem; margin: 1rem -1rem; border-radius: 0; border-left: none; border-right: none; } } /* Focus and accessibility */ pre:focus-within { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } code:focus { outline: 2px solid var(--color-brand-primary); outline-offset: 1px; } /* Remove highlight.js default background and let our styles take precedence */ pre code.hljs { background: transparent !important; } /* Custom Filter Classes for Prescription Filtering */ .filter-selected { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } .filter-hidden { display: none !important; } `, }, ], transformers: [transformerDirectives(), transformerVariantGroup()], });