vira - v31.18.2
    Preparing search index...

    Variable viraThemeConst

    viraTheme: ColorTheme<
        {
            "vira-blue-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-blue-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-blue-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-blue-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-blue-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-blue-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-placeholder": { foreground: SingleCssVarDefinition };
            "vira-blue-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-blue-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-blue-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-brand-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-brand-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-brand-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-brand-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-brand-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-brand-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-brand-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-brand-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-brand-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-brand-foreground-placeholder": {
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-brand-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-brand-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-green-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-green-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-green-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-green-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-green-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-green-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-green-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-green-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-green-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-green-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-green-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-green-foreground-placeholder": {
                foreground: SingleCssVarDefinition;
            };
            "vira-green-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-green-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-green-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-grey-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-grey-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-grey-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-grey-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-grey-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-placeholder": { foreground: SingleCssVarDefinition };
            "vira-grey-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-grey-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-grey-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-pink-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-pink-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-pink-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-pink-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-pink-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-placeholder": { foreground: SingleCssVarDefinition };
            "vira-pink-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-pink-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-pink-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-purple-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-purple-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-purple-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-purple-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-purple-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-purple-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-purple-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-purple-behind-fg-placeholder": {
                background: SingleCssVarDefinition;
            };
            "vira-purple-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-purple-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-purple-foreground-decoration": {
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-purple-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-purple-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-purple-foreground-placeholder": {
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-foreground-small-body": {
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-purple-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-red-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-red-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-red-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-red-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-red-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-red-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-red-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-placeholder": { foreground: SingleCssVarDefinition };
            "vira-red-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-red-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-red-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-teal-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-teal-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-teal-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-placeholder": { background: SingleCssVarDefinition };
            "vira-teal-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-teal-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-decoration": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-placeholder": { foreground: SingleCssVarDefinition };
            "vira-teal-foreground-small-body": { foreground: SingleCssVarDefinition };
            "vira-teal-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-teal-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-behind-bg-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-decoration": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-header": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-invisible": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-non-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-placeholder": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-bg-small-body": {
                background: SingleCssVarDefinition;
                foreground: { refDefaultBackground: true };
            };
            "vira-yellow-behind-fg-body": { background: SingleCssVarDefinition };
            "vira-yellow-behind-fg-decoration": { background: SingleCssVarDefinition };
            "vira-yellow-behind-fg-header": { background: SingleCssVarDefinition };
            "vira-yellow-behind-fg-highest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-yellow-behind-fg-invisible": { background: SingleCssVarDefinition };
            "vira-yellow-behind-fg-lowest-contrast": {
                background: SingleCssVarDefinition;
            };
            "vira-yellow-behind-fg-non-body": { background: SingleCssVarDefinition };
            "vira-yellow-behind-fg-placeholder": {
                background: SingleCssVarDefinition;
            };
            "vira-yellow-behind-fg-small-body": { background: SingleCssVarDefinition };
            "vira-yellow-foreground-body": { foreground: SingleCssVarDefinition };
            "vira-yellow-foreground-decoration": {
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-foreground-header": { foreground: SingleCssVarDefinition };
            "vira-yellow-foreground-highest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-foreground-invisible": { foreground: SingleCssVarDefinition };
            "vira-yellow-foreground-lowest-contrast": {
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-foreground-non-body": { foreground: SingleCssVarDefinition };
            "vira-yellow-foreground-placeholder": {
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-foreground-small-body": {
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-decoration": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-header": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-highest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-invisible": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-lowest-contrast": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-non-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-placeholder": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
            "vira-yellow-on-self-small-body": {
                background: SingleCssVarDefinition;
                foreground: SingleCssVarDefinition;
            };
        },
    > = ...

    A color theme designed for straightforward accessible foreground and background color choices. All color pairs can be seen here: https://electrovir.github.io/vira/book/styles/vira-theme.

    Consider using colorCss from @electrovir/color for applying a foreground and background color at the same time in CSS.

    Each color choice is stored in a color pair. Each color pair includes a foreground and a background color. Foreground and background color pairs are set to specific lightness levels to ensure a specific level of contrast, which you can choose from (as explained below). Most color pairs include a color interacting with the page default color pair. These page defaults depend on which theme you select: light mode or dark mode. The defaults are the following:

    • Light mode:

      • Foreground: black
      • Background: white

    • Dark mode:

      • Foreground: white
      • Background: black

    Each color in the theme is a key following the pattern vira-{colorName}-{pairType}-{contrastLevel}. (Note that there is also viraThemeByKeys, which stores colors in nested objects, accessed with the pattern viraThemeByKeys[colorName][pairType][contrastLevel].) The following steps explain how to select a color pair:

    1. Choose a color name. Red, blue, etc. This is the color that you're trying to use.

      • Examples:

        • viraTheme.colors['vira-red-foreground-body']
        • viraTheme.colors['vira-blue-foreground-body']

    2. Choose a color pair type. This determines where the color name you chose is placed in the color pair.

      • foreground: "Color in the foreground". In this color pair, the chosen color is the foreground and the page default background (white in light mode, black in dark mode) is the background. The lightness level of the foreground, the chosen color, varies based on the selected contrast level (in the next step).

        • Foreground: the chosen color (red, blue, etc.)
        • Background: the page default background (white in light mode, black in dark mode).
        • Example: viraTheme.colors['vira-red-foreground-body']
        • Example: viraTheme.colors['vira-blue-foreground-body']

      • behind-fg: "Color behind foreground". In this color pair, the chosen color is the background and the page default foreground (black in light mode, white in dark mode) is the foreground. The lightness level of the background, the chosen color, varies based on the selected contrast level (in the next step).

        • Foreground: the page default foreground (black in light mode, white in dark mode).
        • Background: the chosen color (red, blue, etc.)
        • Example: viraTheme.colors['vira-red-behind-fg-body']
        • Example: viraTheme.colors['vira-blue-behind-fg-body']

      • behind-bg: "Color behind background". In this color pair, the chosen color is the background and the page default background (white in light mode, black in dark mode) is the foreground. The lightness level of the background, the chosen color, varies based on the selected contrast level (in the next step).

        • Foreground: the page default background (white in light mode, black in dark mode)
        • Background: the chosen color (red, blue, etc.)
        • Example: viraTheme.colors['vira-red-behind-bg-body']
        • Example: viraTheme.colors['vira-blue-behind-bg-body']

      • on-self: "Color on self". In this color pair, both the foreground and the background are a shade of the chosen color. The lightness level of the background chosen color varies based on the selected contrast level (in the next step). The lightness of the foreground chosen color is fixed based on the current theme: a dark foreground in light mode, a light foreground in dark mode (to remain similar to the page default foreground color).

        • Foreground: the chosen color (red, blue, etc.)
        • Background: the chosen color (red, blue, etc.)
        • Example: viraTheme.colors['vira-red-on-self-body']
        • Example: viraTheme.colors['vira-blue-on-self-body']

    3. Choose a contrast level. Choose a level of contrast based on what you are applying color to. See https://electrovir.github.io/color/docs/variables/contrastLevels.html for more details on each contrast level as defined by APCA color contrast standards.

      • small-body: Choose this for text or page elements that should be legible but are small in size (< 14px font size, similarly sized icons, etc.).

        • The color pair is chosen to ensure about Lc 90 contrast (very high) between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-small-body']: In light mode, this has a very dark red foreground.
        • Example: viraTheme.colors['vira-blue-on-self-small-body']: In light mode, a very light blue is used as the background color. (The foreground is a very dark blue.)

      • body: Chose this for text or page elements that should be legible and are a normal body text size (>= 14px font size).

        • The color pair is chosen to ensure about Lc 75 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-body']: In light mode, this has a dark red foreground (not as dark as the small-body variant).
        • Example: viraTheme.colors['vira-blue-on-self-body']: In light mode, a light blue background is used (but darker than the small-body contrast level). (The foreground is a very dark blue.)

      • non-body: Chose this for text or page elements that should be legible but are larger in size (>= 24px font size with normal font weight) or are not a part of normal body text.

        • The color pair is chosen to ensure about Lc 60 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-non-body']: In light mode, this has slightly dark red foreground.
        • Example: viraTheme.colors['vira-blue-on-self-non-body']: In light mode, a light blue background is used (but darker than the body contrast level). (The foreground is a very dark blue.)

      • header: Chose this for text or page elements that are heading or heading sized elements (>=24px bolded text or >=36px normal weight text).

        • The color pair is chosen to ensure about Lc 45 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-header']: In light mode, this has a very vibrant red foreground.
        • Example: viraTheme.colors['vira-blue-on-self-header']: In light mode, a plain blue (not dark or light) background is used. (The foreground is a very dark blue.)

      • placeholder: Chose this for text or page elements that are placeholders or disabled.

        • The color pair is chosen to ensure about Lc 30 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-placeholder']: In light mode, this has a light red foreground.
        • Example: viraTheme.colors['vira-blue-on-self-placeholder']: In light mode, a dark blue background is used. (The foreground is a very dark blue.)

      • decoration: Chose this for decorative page elements such as borders that, if not visible to the user (many users may not be able to distinguish this color pair's foreground from the background), do not reduce the usability of the page.

        • The color pair is chosen to ensure about Lc 15 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-decoration']: In light mode, this has a very light red foreground.
        • Example: viraTheme.colors['vira-blue-on-self-decoration']: In light mode, a darker blue background is used. (The foreground is a very dark blue.)

      • invisible: Choose this for decorative elements that are even harder-to-see (dimmer) than decoration elements. The foreground and background colors in a color pair in this contrast level should be treated as indistinguishable from each other to most of the human population.

        • The color pair is chosen to ensure Lc 0 contrast between the foreground and the background.
        • Example: viraTheme.colors['vira-red-foreground-invisible']: In light mode, this has an extremely light red foreground, essentially a pale pink.
        • Example: viraTheme.colors['vira-blue-on-self-invisible']: In light mode, an extremely dark blue background is used. (The foreground is a very dark blue.)

      There are also auxiliary contrast levels available which do not correspond to any specific element usage on a page:

      • highest-contrast: Maximum possible contrast between the foreground and background (from the color palette). In many color pairs, this will be the same as the small-body contrast level.
      • lowest-contrast: Minimum possible contrast between the foreground and background (from the color palette). In many color pairs, this will be the same as the invisible contrast level.

    To style an error message (red body text):

    color: ${viraTheme.colors['vira-red-foreground-body'].foreground.value};

    To style a green banner with white text (in light mode) and black text (in dark mode):

    .banner {
        ${colorCss(viraTheme.colors['vira-green-behind-bg-body'])};
    }

    viraThemeByKeys for structured access:

    color: ${viraThemeByKeys.red.foreground.body.foreground.value};

    Settings

    Member Visibility

    On This Page

    Color PairsChoosing a ColorExamples