rustelo/website-htmx-rustelo-code
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
website-htmx-rustelo-code/uno.config.ts

665 lines
25 KiB
TypeScript
Raw Normal View History

init repo with source
2026-07-10 03:44:13 +01:00
// 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>{
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()],
});
Reference in a new issue Copy permalink