import { type CSSProperties } from 'react';
/**
 * Structured colour definitions that mirror the *old* Primer
 * `colorSchemes.*.colors` shape.  Each theme file provides one of
 * these for light mode and one for dark mode.
 *
 * The {@link colorDefsToCSS} helper converts them into a flat
 * `CSSProperties` bag of Primer CSS custom-property overrides so
 * the `<DatalayerThemeProvider>` can apply them via
 * `<BaseStyles style={…}>`.
 */
export interface ThemeColorDefs {
    canvas: {
        default: string;
        subtle?: string;
    };
    fg: {
        default: string;
        muted: string;
        onEmphasis: string;
    };
    accent: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    success: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    attention?: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    danger?: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    severe?: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    done?: {
        fg: string;
        emphasis: string;
        muted: string;
        subtle?: string;
    };
    border?: {
        default: string;
        muted: string;
    };
    btn: {
        text: string;
        bg: string;
        border: string;
        hoverBg: string;
        hoverBorder: string;
        activeBg: string;
        activeBorder: string;
        selectedBg: string;
        counterBg: string;
        primary: {
            text: string;
            bg: string;
            border: string;
            hoverBg: string;
            hoverBorder: string;
            selectedBg: string;
            disabledText: string;
            disabledBg: string;
            disabledBorder: string;
            icon: string;
            counterBg: string;
        };
        outline: {
            text: string;
            hoverText: string;
            hoverBg: string;
            hoverBorder: string;
            hoverCounterBg: string;
            selectedText: string;
            selectedBg: string;
            selectedBorder: string;
            disabledText: string;
            disabledBg: string;
            disabledCounterBg: string;
            counterBg: string;
            counterFg: string;
            hoverCounterFg: string;
            disabledCounterFg: string;
        };
        danger: {
            text: string;
            hoverText: string;
            hoverBg: string;
            hoverBorder: string;
            hoverCounterBg: string;
            selectedText: string;
            selectedBg: string;
            selectedBorder: string;
            disabledText: string;
            disabledBg: string;
            disabledCounterBg: string;
            counterBg: string;
            counterFg: string;
            hoverCounterFg: string;
            disabledCounterFg: string;
            icon: string;
        };
    };
}
/**
 * Convert a structured `ThemeColorDefs` object into a flat
 * `CSSProperties` bag of Primer React CSS custom-property overrides.
 *
 * These variables are the *functional tokens* consumed by Primer
 * React components (sourced from `@primer/primitives`).  Setting
 * them on a parent element is enough to retheme every Primer
 * component in the sub-tree.
 *
 * ### Variable families covered
 *
 * | Family           | Example variable                       |
 * |------------------|----------------------------------------|
 * | Background       | `--bgColor-default`                    |
 * | Foreground       | `--fgColor-default`                    |
 * | Border           | `--borderColor-default`                |
 * | Link             | `--fgColor-link`                       |
 * | Accent / Success | `--bgColor-accent-emphasis`            |
 * | Default button   | `--button-default-bgColor-rest`        |
 * | Primary button   | `--button-primary-bgColor-rest`        |
 * | Outline button   | `--button-outline-fgColor-rest`        |
 * | Danger button    | `--button-danger-bgColor-hover`        |
 * | Button counters  | `--buttonCounter-primary-bgColor-rest` |
 * | Control track    | `--controlTrack-bgColor-rest`          |
 * | Control checked  | `--control-checked-bgColor-rest`       |
 * | Control knob     | `--controlKnob-bgColor-rest`           |
 * | List hover       | `--control-transparent-bgColor-hover`  |
 * | Legacy aliases   | `--color-btn-primary-bg`               |
 * | Brand (custom)   | `--brand-color-canvas-default`         |
 */
export declare function colorDefsToCSS(defs: ThemeColorDefs, mode?: 'light' | 'dark'): CSSProperties;
/** Light + dark CSS-property pairs for the `themeStyles` prop. */
export interface ThemeStyles {
    light: CSSProperties;
    dark: CSSProperties;
}
/**
 * Build a complete `ThemeStyles` object from light / dark
 * `ThemeColorDefs`.  The result is ready to pass straight to
 * `<DatalayerThemeProvider themeStyles={…}>`.
 *
 * @param options.fontFamily  When supplied, the Primer font-stack
 *   CSS custom properties (`--fontStack-sansSerif`,
 *   `--fontStack-sansSerifDisplay`) are overridden so that every
 *   Primer component that uses the CSS `font` shorthand (e.g.
 *   `Blankslate`) picks up the themed font instead of the
 *   hard-coded system-font fallback.
 */
export declare function buildThemeStyles(light: ThemeColorDefs, dark: ThemeColorDefs, options?: {
    fontFamily?: string;
}): ThemeStyles;