/**
 * Semantic Design Tokens Utility
 *
 * Provides TypeScript mappings for semantic design tokens.
 * These map to CSS custom properties defined in fe-libs/tokens.
 *
 * Token Reference (from fe-libs/tokens):
 * - Status: --color-status-{success|warning|error|info}-{bg|bg-subtle|text|border}
 * - Action: --color-action-{primary|secondary|danger}-{bg|bgHover|text}
 * - Text: --color-text-{primary|secondary|muted}
 * - Background: --color-bg-{canvas|surface|elevated|sunken}
 *
 * The app shell (e.g., fluidgrids-app) defines the actual CSS variable values,
 * allowing each product to have its own theme while microfrontends remain consistent.
 */
export type SemanticStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary';
interface StatusTokenClasses {
    /** Background for subtle/badge usage */
    bg: string;
    /** Text color */
    text: string;
    /** Border color */
    border: string;
    /** Dot/indicator color (solid) */
    dot: string;
    /** Icon color */
    icon: string;
}
/**
 * Semantic status color classes using design tokens
 * These map to CSS custom properties defined in the app shell
 */
export declare const statusTokens: Record<SemanticStatus, StatusTokenClasses>;
/**
 * Get status token classes for a given status
 */
export declare function getStatusTokens(status: SemanticStatus): StatusTokenClasses;
/**
 * Get combined badge classes for a status
 */
export declare function getStatusBadgeTokens(status: SemanticStatus): string;
export declare const trendTokens: {
    readonly positive: {
        readonly text: "text-status-success-text";
        readonly icon: "text-status-success-bg";
    };
    readonly negative: {
        readonly text: "text-status-error-text";
        readonly icon: "text-status-error-bg";
    };
    readonly neutral: {
        readonly text: "text-status-neutral-text";
        readonly icon: "text-status-neutral-text";
    };
};
/**
 * Get trend indicator classes
 */
export declare function getTrendTokens(isPositive: boolean | null): {
    readonly text: "text-status-success-text";
    readonly icon: "text-status-success-bg";
} | {
    readonly text: "text-status-error-text";
    readonly icon: "text-status-error-bg";
} | {
    readonly text: "text-status-neutral-text";
    readonly icon: "text-status-neutral-text";
};
export declare const progressTokens: {
    healthy: {
        bar: string;
        track: string;
    };
    warning: {
        bar: string;
        track: string;
    };
    critical: {
        bar: string;
        track: string;
    };
};
/**
 * Get progress bar colors based on percentage
 */
export declare function getProgressTokens(percentage: number): {
    bar: string;
    track: string;
};
export declare const categoryTokens: {
    plan: {
        bg: string;
        text: string;
        border: string;
    };
    addon: {
        bg: string;
        text: string;
        border: string;
    };
    credits: {
        bg: string;
        text: string;
        border: string;
    };
};
/**
 * Get category badge classes
 */
export declare function getCategoryTokens(category: 'plan' | 'addon' | 'credits'): {
    bg: string;
    text: string;
    border: string;
} | {
    bg: string;
    text: string;
    border: string;
} | {
    bg: string;
    text: string;
    border: string;
};
export declare const alertTokens: {
    success: {
        container: string;
        text: string;
        icon: string;
    };
    warning: {
        container: string;
        text: string;
        icon: string;
    };
    error: {
        container: string;
        text: string;
        icon: string;
    };
    info: {
        container: string;
        text: string;
        icon: string;
    };
};
/**
 * Get alert/banner classes
 */
export declare function getAlertTokens(type: 'success' | 'warning' | 'error' | 'info'): {
    container: string;
    text: string;
    icon: string;
} | {
    container: string;
    text: string;
    icon: string;
} | {
    container: string;
    text: string;
    icon: string;
} | {
    container: string;
    text: string;
    icon: string;
};
export {};
//# sourceMappingURL=tokens.d.ts.map