import type { CSSProperties } from 'react';
/**
 * Theme color tokens support three formats:
 *
 * 1. Semantic/palette tokens: 'text', 'surface', 'primary', 'mutedText', 'neutral-900', etc.
 *    These resolve to CSS variables like `var(--tb-primary)`
 *
 * 2. Tokens with opacity: 'surface/95', 'primary/50', 'border/20'
 *    Format: `{token}/{opacity%}`
 *    These resolve to rgba with the specified opacity (e.g., `rgba(var(--tb-surface), 0.95)`)
 *
 * 3. Raw CSS values: 'raw:transparent', 'raw:#ffffff', 'raw:rgba(255, 0, 0, 0.5)'
 *    Format: `raw:{css-value}`
 *    These bypass the CSS variable system and output the literal value
 *
 * @example
 * // Semantic token
 * rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
 *
 * @example
 * // Token with opacity
 * rgbColorValue('surface/95') // => 'rgba(var(--tb-surface), 0.95)'
 *
 * @example
 * // Raw value
 * rgbColorValue('raw:transparent') // => 'transparent'
 */
type ThemeColorToken = string;
/**
 * Converts a theme color token to a CSS rgb/rgba value.
 * This is the primary function for applying theme colors to CSS properties.
 *
 * @param token - Theme color token (semantic, with opacity, or raw)
 * @returns CSS color value (rgb, rgba, or raw CSS value)
 *
 * @example
 * rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
 * rgbColorValue('surface/95') // => 'rgba(var(--tb-surface), 0.95)'
 * rgbColorValue('raw:transparent') // => 'transparent'
 */
export declare function rgbColorValue(token: ThemeColorToken): string;
/**
 * Converts a theme color token to a CSS variable reference.
 * Note: This returns the base variable without rgb() wrapper, ignoring opacity.
 *
 * @param token - Theme color token
 * @returns CSS variable reference
 *
 * @example
 * cssVarValue('primary') // => 'var(--tb-primary)'
 * cssVarValue('surface/95') // => 'var(--tb-surface)' (opacity ignored)
 */
export declare function cssVarValue(token: ThemeColorToken): string;
/**
 * Creates a backgroundColor style object from a theme token.
 *
 * @param token - Theme color token
 * @returns CSSProperties with backgroundColor
 */
export declare function backgroundColorStyle(token: ThemeColorToken): CSSProperties;
/**
 * Creates a text color style object from a theme token.
 *
 * @param token - Theme color token
 * @returns CSSProperties with color
 */
export declare function textColorStyle(token: ThemeColorToken): CSSProperties;
/**
 * Creates a border color style object from a theme token.
 *
 * @param token - Theme color token
 * @returns CSSProperties with borderColor
 */
export declare function borderColorStyle(token: ThemeColorToken): CSSProperties;
/**
 * Creates a linear gradient background from theme tokens.
 *
 * @param tokens - Array of theme color tokens for gradient stops
 * @param direction - CSS gradient direction (default: 'to bottom')
 * @returns CSSProperties with backgroundImage
 *
 * @example
 * gradientBackgroundStyle(['primary', 'secondary'])
 * // => { backgroundImage: 'linear-gradient(to bottom, rgb(var(--tb-primary)), rgb(var(--tb-secondary)))' }
 *
 * @example
 * gradientBackgroundStyle(['primary/80', 'secondary/60'], '45deg')
 * // => { backgroundImage: 'linear-gradient(45deg, rgba(var(--tb-primary), 0.8), rgba(var(--tb-secondary), 0.6))' }
 */
export declare function gradientBackgroundStyle(tokens: ThemeColorToken[], direction?: string): CSSProperties;
/**
 * Merges multiple CSSProperties objects into a single object.
 * Later styles override earlier ones. Undefined values are filtered out.
 * Returns undefined if the merged result is empty.
 *
 * @param styles - Variable number of CSSProperties objects (can be undefined)
 * @returns Merged CSSProperties object, or undefined if empty
 *
 * @example
 * mergeStyles(
 *   backgroundColorStyle('surface'),
 *   textColorStyle('text'),
 *   borderColorStyle('border')
 * )
 * // => { backgroundColor: '...', color: '...', borderColor: '...' }
 */
export declare function mergeStyles(...styles: Array<CSSProperties | undefined>): CSSProperties | undefined;
export {};
