import type { RicosPalette } from '../ricos-types/index.js';
declare const THEME_COLOR_SLOTS: readonly ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
type ThemeColorSlot = (typeof THEME_COLOR_SLOTS)[number];
type ThemeColorBaseToken = `$theme-color-${ThemeColorSlot}`;
export type ThemeColorToken = ThemeColorBaseToken | `${ThemeColorBaseToken}-${number}`;
type PaletteField = keyof Omit<RicosPalette, 'format'>;
export declare const THEME_COLOR_SLOT_MAP: Record<ThemeColorSlot, PaletteField>;
/**
 * Use this when a plugin renders a color from document data.
 *
 * Call it for every plugin color field before using that value in the DOM:
 * React `style`, CSS variables, SVG attributes, gradients, Tiptap `renderHTML`,
 * and custom node views.
 *
 * Example:
 * `style={{ borderColor: resolveDocumentColorToCss(data.styles?.borderColor) }}`
 *
 * Why: theme tokens must stay connected to the active theme while rendering.
 * `$theme-color-2` becomes `var(--ricos-theme-color-2)`.
 * `$theme-color-2-50` becomes `rgba(var(--ricos-theme-color-2-tuple), 0.5)`.
 *
 * Hex colors are returned unchanged, so it is safe to run all document colors
 * through this on the render path.
 */
export declare function resolveDocumentColorToCss(color: string | undefined): string | undefined;
/**
 * Use this when code needs a fixed hex color.
 *
 * Good uses: color-picker display, static export, screenshots, or an API/UI that
 * cannot use CSS variables. Pass the current `theme.colorPalette` so the token
 * can be resolved to the matching palette color.
 *
 * Example:
 * `const displayColor = resolveDocumentColorToHex(documentColor, theme.colorPalette)`
 *
 * Do not use this for normal plugin rendering. It freezes the current theme
 * color as hex, so the rendered content will not update when the theme changes.
 * Use `resolveDocumentColorToCss` for viewer/editor DOM styles.
 */
export declare function resolveDocumentColorToHex(color: string | undefined, palette: RicosPalette): string | undefined;
/**
 * Lower-level helpers used by shared color controls, validation, and theme CSS generation.
 */
export declare function isThemeColorToken(value: string | undefined | null): value is ThemeColorToken;
export declare function stripThemeColorTokenOpacity(token: ThemeColorToken): ThemeColorBaseToken;
export declare function getThemeColorTokenOpacity(token: ThemeColorToken): number;
export declare function setThemeColorTokenOpacity(token: ThemeColorToken, opacity: number): ThemeColorToken;
export declare function themeColorTokenToCssVar(token: ThemeColorToken, format?: 'color' | 'rgbTuple'): string;
export declare function themeColorTokenToHex(token: ThemeColorToken, palette: RicosPalette): string | undefined;
export {};
//# sourceMappingURL=theme-color-token.d.ts.map