vira/dist/styles/form-variants.d.ts

A simple and highly versatile design system using element-vir.

/**
 * All available variants for controlling vira form colors.
 *
 * @category Internal
 */
export declare enum ViraColorVariant {
    /** @default blue colored */
    Info = "info",
    /**
     * Applied when no `color` input is set on a color-aware element.
     *
     * @default black colored
     */
    Plain = "plain",
    /** @default grey colored */
    Neutral = "neutral",
    /** @default red colored */
    Danger = "danger",
    /** @default orange colored */
    Warning = "warning",
    /** @default green colored */
    Positive = "positive",
    /** @default brand colored */
    Brand = "brand",
    /** @default purple colored */
    Special = "special",
    /**
     * No color variant styles will be applied at all, allowing the element's colors to be fully
     * customized via its CSS vars.
     */
    Custom = "custom"
}
/**
 * All defined color variants starting with the default.
 *
 * @category Internal
 */
export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Brand, ViraColorVariant.Special];
/**
 * Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
 * class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
 * intentionally omitted: they are always special-cased by each element so their host classes stay
 * distinct from any theme color class (including `grey`).
 *
 * @category Internal
 */
export declare const viraColorVariantToHostClassKey: {
    readonly info: "blue";
    readonly danger: "red";
    readonly warning: "yellow";
    readonly positive: "green";
    readonly brand: "brand";
    readonly special: "purple";
};
/**
 * {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
 * {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
 * each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
 *
 * @category Internal
 */
export declare const standaloneThemeColorNames: ("red" | "yellow" | "green" | "teal" | "blue" | "brand" | "purple" | "pink" | "grey")[];
/**
 * All available variants for controlling vira form sizes.
 *
 * @category Internal
 */
export declare enum ViraSize {
    /** @default 40px tall */
    Large = "large",
    /**
     * This is the default.
     *
     * @default 32px tall
     */
    Medium = "medium",
    /** @default 24px tall */
    Small = "small",
    /**
     * No size styles will be applied at all. All related CSS vars are free to customize to your
     * wishes.
     */
    None = "none"
}
/**
 * All defined size variants starting with the default.
 *
 * @category Internal
 */
export declare const viraSizeVariants: readonly [ViraSize.Small, ViraSize.Medium, ViraSize.Large];
/**
 * All available variants for controlling vira form emphasis.
 *
 * @category Internal
 */
export declare enum ViraEmphasis {
    /** This is the default. */
    Standard = "standard",
    Subtle = "subtle",
    /**
     * No emphasis styles will be applied at all. All related CSS vars are free to customize to your
     * wishes.
     */
    None = "none"
}
/**
 * All defined emphasis variants starting with the default.
 *
 * @category Internal
 */
export declare const viraEmphasisVariants: readonly [ViraEmphasis.Standard, ViraEmphasis.Subtle];
/**
 * Default heights for {@link ViraSize} values.
 *
 * @category Internal
 */
export declare const viraSizeHeights: Record<Exclude<ViraSize, ViraSize.None>, number>;