@spark-ui/progress-tracker/dist/stepIndicatorVariants/tinted.d.ts

A progress tracker component is a visual navigation element typically used to display progress or guide user through a multi-step process.

export declare const tintedVariants: readonly [{
    readonly design: "tinted";
    readonly intent: "basic";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-basic-container bg-basic-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"];
}, {
    readonly design: "tinted";
    readonly intent: "basic";
    readonly state: "active";
    readonly class: "text-on-basic bg-basic";
}, {
    readonly design: "tinted";
    readonly intent: "support";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-support-container bg-support-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"];
}, {
    readonly design: "tinted";
    readonly intent: "support";
    readonly state: "active";
    readonly class: "text-on-support bg-support";
}, {
    readonly design: "tinted";
    readonly intent: "main";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-main-container bg-main-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-main-container"];
}, {
    readonly design: "tinted";
    readonly intent: "main";
    readonly state: "active";
    readonly class: "text-on-main bg-main";
}, {
    readonly design: "tinted";
    readonly intent: "neutral";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-neutral-container bg-neutral-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"];
}, {
    readonly design: "tinted";
    readonly intent: "neutral";
    readonly state: "active";
    readonly class: "text-on-neutral bg-neutral";
}, {
    readonly design: "tinted";
    readonly intent: "info";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-info-container bg-info-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-info-container"];
}, {
    readonly design: "tinted";
    readonly intent: "info";
    readonly state: "active";
    readonly class: "text-on-info bg-info";
}, {
    readonly design: "tinted";
    readonly intent: "accent";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-accent-container bg-accent-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-accent-container"];
}, {
    readonly design: "tinted";
    readonly intent: "accent";
    readonly state: "active";
    readonly class: "text-on-accent bg-accent";
}, {
    readonly design: "tinted";
    readonly intent: "danger";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-error-container bg-error-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-error-container"];
}, {
    readonly design: "tinted";
    readonly intent: "danger";
    readonly state: "active";
    readonly class: "text-on-error bg-error";
}, {
    readonly design: "tinted";
    readonly intent: "alert";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-alert-container bg-alert-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-alert-container"];
}, {
    readonly design: "tinted";
    readonly intent: "alert";
    readonly state: "active";
    readonly class: "text-on-alert bg-alert";
}, {
    readonly design: "tinted";
    readonly intent: "success";
    readonly state: readonly ["complete", "incomplete"];
    readonly class: readonly ["text-on-success-container bg-success-container", "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered", "group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"];
}, {
    readonly design: "tinted";
    readonly intent: "success";
    readonly state: "active";
    readonly class: "text-on-success bg-success";
}];