import type { DesktopPreviewAnnotationTheme } from "@t3tools/contracts"; const readVariable = (styles: CSSStyleDeclaration, name: string, fallback: string): string =>  styles.getPropertyValue(name).trim() || fallback; export function readPreviewAnnotationTheme(): DesktopPreviewAnnotationTheme {  const root = document.documentElement;  const styles = getComputedStyle(root);  return {    colorScheme: root.classList.contains("dark") ? "dark" : "light",    radius: readVariable(styles, "--radius", "0.625rem"),    background: readVariable(styles, "--background", "white"),    foreground: readVariable(styles, "--contrast-foreground", "oklch(0.269 0 0)"),    popover: readVariable(styles, "--popover", "white"),    popoverForeground: readVariable(styles, "--contrast-popover-foreground", "oklch(0.269 0 0)"),    primary: readVariable(styles, "--primary", "oklch(0.488 0.217 264)"),    primaryForeground: readVariable(styles, "--primary-foreground", "white"),    muted: readVariable(styles, "--muted", "rgb(0 0 0 / 4%)"),    mutedForeground: readVariable(styles, "--contrast-muted-foreground", "oklch(0.556 0 0)"),    accent: readVariable(styles, "--accent", "rgb(0 0 0 / 4%)"),    accentForeground: readVariable(styles, "--contrast-accent-foreground", "oklch(0.269 0 0)"),    border: readVariable(styles, "--contrast-border", "rgb(0 0 0 / 8%)"),    input: readVariable(styles, "--contrast-input", "rgb(0 0 0 / 10%)"),    ring: readVariable(styles, "--ring", "oklch(0.488 0.217 264)"),    fontSans: readVariable(styles, "--font-sans", styles.fontFamily || "system-ui, sans-serif"),    fontMono: readVariable(styles, "--font-mono", "ui-monospace, monospace"),  };}