import { default as COLOR_USAGE_MARKDOWN } from './docs/colors/usage.md?raw';
import { ShadeLevel } from './multipliers.js';
/**
 * Shade range description.
 */
export interface ShadeRange {
    /** Shade levels included in this range */
    shades: ShadeLevel[];
    /** Description of what this range is used for */
    purpose: string;
    /** Example use cases */
    examples: string[];
}
/**
 * Color family semantic role definition.
 */
export interface ColorSemanticRole {
    /** Brief role description */
    role: string;
    /** Detailed description of the color's purpose */
    description: string;
    /** General usage patterns */
    usage: string[];
    /** Components that commonly use this color */
    components: string[];
    /** Shade-specific guidance */
    shadeGuidance: ShadeRange[];
}
/**
 * Semantic roles for each color family.
 * Derived from analysis of component schemas across Material, Fluent, Bootstrap, and Indigo themes.
 */
export declare const COLOR_SEMANTIC_ROLES: Record<string, ColorSemanticRole>;
/**
 * Common opacity values and their purposes.
 */
export declare const OPACITY_USAGE: {
    readonly "0.05-0.1": "Very subtle hover overlays, light backgrounds";
    readonly "0.12-0.15": "Subtle active states, disabled backgrounds";
    readonly "0.2": "Disabled text/elements";
    readonly "0.3": "Selected backgrounds (Indigo theme), medium overlays";
    readonly "0.38": "Material Design disabled opacity (standard)";
    readonly "0.5": "Focus outlines, semi-transparent overlays";
    readonly "0.6": "Border colors, secondary elements";
    readonly "0.8": "Strong overlays, near-opaque states";
    readonly "0.9": "Tooltip backgrounds, near-solid overlays";
};
/**
 * State progression patterns showing how colors change across interaction states.
 */
export declare const STATE_PATTERNS: {
    readonly button: {
        readonly description: "Button state progression";
        readonly states: {
            readonly idle: "primary-500 background";
            readonly hover: "primary-600 or primary-500 with overlay";
            readonly focus: "primary-500 with focus ring (primary-200 or 300)";
            readonly active: "primary-700 or darker";
            readonly disabled: "gray-300 background, gray-500 text";
        };
    };
    readonly listItem: {
        readonly description: "List item state progression";
        readonly states: {
            readonly idle: "surface background, gray-800 text";
            readonly hover: "gray-100 or 200 background";
            readonly focus: "gray-100 background with focus outline";
            readonly selected: "primary-100 or 200 background (or primary-300 with opacity)";
            readonly disabled: "gray-400 text, no interaction";
        };
    };
    readonly input: {
        readonly description: "Input field state progression";
        readonly states: {
            readonly idle: "surface background, gray-300 or 400 border";
            readonly hover: "gray-400 or 500 border";
            readonly focus: "primary-500 border, focus ring";
            readonly filled: "gray-800 text";
            readonly error: "error-500 border and text";
            readonly disabled: "gray-100 background, gray-400 text";
        };
    };
};
/**
 * Design system specific patterns.
 */
export declare const THEME_PATTERNS: {
    readonly material: {
        readonly name: "Material Design";
        readonly characteristics: readonly ["Uses secondary color prominently for accents", "Ripple effects on interaction", "Shade 500 as baseline", "Elevation through shadows", "A100-A700 accent shades for selection"];
    };
    readonly fluent: {
        readonly name: "Fluent Design";
        readonly characteristics: readonly ["More gray-based, subtle interactions", "Hover states use 100-200 shades", "Border-focused component styling", "Less saturated colors overall"];
    };
    readonly bootstrap: {
        readonly name: "Bootstrap";
        readonly characteristics: readonly ["Uses primary color for most accents", "Shade 600 commonly used for hover", "Strong border patterns", "More traditional web styling"];
    };
    readonly indigo: {
        readonly name: "Indigo Design";
        readonly characteristics: readonly ["Transparent backgrounds with opacity", "Primary 300 with 0.3 opacity for selections", "Strong emphasis on gray scale", "Clean, modern aesthetic", "Subtle interactive states"];
    };
};
export { COLOR_USAGE_MARKDOWN };