export type ControlSize = "smallest" | "small" | "medium" | "large";
export type ButtonSize = ControlSize | "xl" | "2xl";
export declare const CONTROL_HEIGHT: {
    readonly smallest: 28;
    readonly small: 32;
    readonly medium: 40;
    readonly large: 48;
    readonly xl: 56;
    readonly "2xl": 64;
};
/** Tailwind min-height class per control size. Keep in sync with CONTROL_HEIGHT. */
export declare const controlHeightMixin: {
    readonly smallest: "min-h-[28px]";
    readonly small: "min-h-[32px]";
    readonly medium: "min-h-[40px]";
    readonly large: "min-h-[48px]";
    readonly xl: "min-h-[56px]";
    readonly "2xl": "min-h-[64px]";
};
/** Horizontal padding paired with each size, so gutters scale with height. */
export declare const controlPaddingMixin: {
    readonly smallest: "px-2";
    readonly small: "px-2";
    readonly medium: "px-3";
    readonly large: "px-4";
    readonly xl: "px-6";
    readonly "2xl": "px-10";
};
export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
/**
 * An inset well: code, a query, a log tail, a connection string.
 *
 * It must read as *recessed into* the surface holding it, which means darker
 * than that surface in dark mode — `surface-950` under a `surface-900` card.
 * The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
 * `#0a0a0a` card around it, so the well appears to float above the thing it is
 * set into. Pair with `font-mono`; this mixin carries the surface only.
 */
export declare const codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
/**
 * The accent, used as TEXT.
 *
 * `--color-primary` (#0070F4) is tuned to be a fill — white text on it, it on
 * white. Read as text on our dark surfaces it lands at **4.36:1 on a
 * `surface-900` card** (measured), which is below AA for body-sized text, and
 * every accent link in the product sits on exactly that surface. On the page's
 * `surface-950` it only reaches 4.62:1, so the margin was never real.
 *
 * `--color-primary-light` is the same hue lifted 0.15 in OKLCH lightness and
 * measures **7.34:1** on the same card. It is indistinguishable as "the blue"
 * and comfortably legible, so dark mode swaps to it for text.
 *
 * Use this for links, accent labels and any accent-coloured type. It is NOT for
 * fills — a filled button keeps `bg-primary`, where the contrast question runs
 * the other way and #0070F4 is already correct.
 */
export declare const accentTextMixin = "text-primary dark:text-primary-light";
export declare const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
export declare const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";