vira

/** * 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](https://electrovir.github.io/color/docs/functions/colorCss.html) for applying * a foreground and background color at the same time in CSS. * * ## Color Pairs * * 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 * * ## Choosing a Color * * 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. * * ## Examples * * To style an error message (red body text): * * ```css * 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): * * ```css * .banner { * ${colorCss(viraTheme.colors['vira-green-behind-bg-body'])}; * } * ``` * * `viraThemeByKeys` for structured access: * * ```css * color: ${viraThemeByKeys.red.foreground.body.foreground.value}; * ``` * * @category Color */ export declare const viraTheme: import("theme-vir/dist/color-theme/color-theme.js").ColorTheme<{ readonly 'vira-red-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-red-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-yellow-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-green-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-teal-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-blue-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-non-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-header': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-placeholder': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-decoration': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-invisible': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-bg-lowest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-highest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-small-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-non-body': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-header': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-placeholder': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-decoration': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-invisible': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-behind-fg-lowest-contrast': { readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-brand-on-self-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-highest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-small-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-non-body': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-header': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-placeholder': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-decoration': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-invisible': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-foreground-lowest-contrast': { readonly foreground: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-behind-bg-highest-contrast': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-behind-bg-small-body': { readonly foreground: { readonly refDefaultBackground: true; }; readonly background: import("lit-css-vars").SingleCssVarDefinition; }; readonly 'vira-purple-behind-b