/**
 * The app's theme inside the sandbox: the host page's CSS custom properties (`--background`,
 * `--primary`, `--radius`…) read from `:root` and handed to the frame, and — with Tailwind on — an
 * `@theme` that maps them to utilities (`bg-primary`, `text-muted-foreground`, `rounded-lg`).
 *
 * Isomorphic: the browser renderer collects and pushes the values, the server and the Vite plugin
 * only need the names (what the model is told it may use).
 */
/**
 * `--name: value` declarations in a stylesheet's text (what the Vite plugin scans). `rootOnly`:
 * only those on the root (`:root`, `html`, `[data-theme]`, `.dark`…) — a theme's, not a
 * component's own (`.btn { --bs-btn-color }`).
 */
export declare function themeVarsFromCss(css: string, options?: {
    rootOnly?: boolean;
}): Record<string, string>;
/** A value that is a color — a function, a hex, a named color, or shadcn's bare `H S% L%` channels. */
export declare function isColorValue(value: string): boolean;
/** shadcn v3's `222.2 84% 4.9%`: hue saturation lightness, to be wrapped in `hsl(…)`. */
export declare function isHslChannels(value: string): boolean;
/** What a set of theme variables gives the model to work with. */
export interface ThemeTokens {
    /** Color utility names (`primary`, `muted-foreground`): `bg-primary` with Tailwind. */
    colors: string[];
    /**
     * The color variables as they exist in the frame (`--primary`, `--color-surface-secondary`) —
     * what `var(…)` may name. Not the utility name: `--color-x` is `bg-x`, never `var(--x)`.
     */
    colorVars: string[];
    /** There is a `--radius` (`rounded-sm`…`rounded-xl` follow it). */
    radius: boolean;
    /** Font variables (`--font-sans`). */
    fonts: string[];
    /** Everything else, by name. */
    other: string[];
}
/** Sort theme variables into colors, radius, fonts and the rest, by value (else by name). */
export declare function themeTokens(vars: Record<string, string> | readonly string[]): ThemeTokens;
/** What the model is told about the theme (inside the sandbox description). */
export declare function themeToModelText(vars: Record<string, string> | readonly string[] | undefined, options?: {
    tailwind?: boolean;
}): string;
/**
 * `:root { --x: value; … }` — the theme as the frame gets it. `colorScheme` is the host root's
 * computed `color-scheme`: mirrored when the host sets one (a frame whose scheme differs from its
 * page's is painted opaque), left out when it is `normal`.
 */
export declare function hostThemeCss(vars: Record<string, string>, options?: {
    colorScheme?: string;
}): string;
/**
 * The `@theme` that maps the host's variables to Tailwind utilities — colors to `--color-*`
 * (`hsl(…)`-wrapped for bare channels), `--radius` to the radius scale, fonts as they are — and a
 * `dark` variant that follows the `dark` class and `data-theme` the frame mirrors from the host.
 */
export declare function tailwindThemeCss(vars: Record<string, string>): string;
/** The root attributes a light/dark switch lives in: `data-theme`, `data-mode`, `data-bs-theme`, `data-color-scheme`… */
export declare const MODE_ATTRIBUTE: RegExp;
/** The host root's light/dark attributes (see {@link MODE_ATTRIBUTE}), to mirror on the frame's. */
export declare function hostModeAttributes(doc: Document): Record<string, string>;
/** Light or dark: the host's `dark`/`light` class, a `data-*theme|mode|scheme` attribute, else the system preference. */
export declare function isHostDark(doc: Document): boolean;
/** The host's theme as it is NOW: each declared variable's computed value on `:root`. */
export declare function collectHostThemeVars(doc: Document): Record<string, string>;
/**
 * Call `onChange` when the host's theme may have changed: its root's class, style or `data-theme`,
 * a stylesheet added or removed, or the system's color scheme. Returns the unsubscribe.
 */
export declare function watchHostTheme(doc: Document, onChange: () => void): () => void;
//# sourceMappingURL=sandbox-theme.d.ts.map