vira
Version:
A simple and highly versatile design system using element-vir.
1,346 lines (1,345 loc) • 96.2 kB
JavaScript
import { defineColorThemeOverride } from 'theme-vir/dist/color-theme/color-theme-override.js';
import { defineColorTheme } from 'theme-vir/dist/color-theme/color-theme.js';
import { viraColorPalette } from './vira-color-palette.js';
/**
* 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 const viraTheme = defineColorTheme({
foreground: 'black',
background: 'white',
prefix: 'vira',
}, {
'vira-red-foreground-highest-contrast': {
foreground: viraColorPalette['vira-red-1000'],
},
'vira-red-foreground-small-body': {
foreground: viraColorPalette['vira-red-1000'],
},
'vira-red-foreground-body': {
foreground: viraColorPalette['vira-red-750'],
},
'vira-red-foreground-non-body': {
foreground: viraColorPalette['vira-red-650'],
},
'vira-red-foreground-header': {
foreground: viraColorPalette['vira-red-500'],
},
'vira-red-foreground-placeholder': {
foreground: viraColorPalette['vira-red-400'],
},
'vira-red-foreground-decoration': {
foreground: viraColorPalette['vira-red-350'],
},
'vira-red-foreground-invisible': {
foreground: viraColorPalette['vira-red-250'],
},
'vira-red-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-red-100'],
},
'vira-red-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-1000'],
},
'vira-red-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-1000'],
},
'vira-red-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-700'],
},
'vira-red-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-600'],
},
'vira-red-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-450'],
},
'vira-red-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-400'],
},
'vira-red-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-350'],
},
'vira-red-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-200'],
},
'vira-red-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-red-100'],
},
'vira-red-behind-fg-highest-contrast': {
background: viraColorPalette['vira-red-100'],
},
'vira-red-behind-fg-small-body': {
background: viraColorPalette['vira-red-250'],
},
'vira-red-behind-fg-body': {
background: viraColorPalette['vira-red-350'],
},
'vira-red-behind-fg-non-body': {
background: viraColorPalette['vira-red-400'],
},
'vira-red-behind-fg-header': {
background: viraColorPalette['vira-red-500'],
},
'vira-red-behind-fg-placeholder': {
background: viraColorPalette['vira-red-650'],
},
'vira-red-behind-fg-decoration': {
background: viraColorPalette['vira-red-750'],
},
'vira-red-behind-fg-invisible': {
background: viraColorPalette['vira-red-1000'],
},
'vira-red-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-red-1000'],
},
'vira-red-on-self-highest-contrast': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-100'],
},
'vira-red-on-self-small-body': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-100'],
},
'vira-red-on-self-body': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-250'],
},
'vira-red-on-self-non-body': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-350'],
},
'vira-red-on-self-header': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-450'],
},
'vira-red-on-self-placeholder': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-500'],
},
'vira-red-on-self-decoration': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-650'],
},
'vira-red-on-self-invisible': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-1000'],
},
'vira-red-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-red-850'],
background: viraColorPalette['vira-red-1000'],
},
'vira-yellow-foreground-highest-contrast': {
foreground: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-foreground-small-body': {
foreground: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-foreground-body': {
foreground: viraColorPalette['vira-yellow-750'],
},
'vira-yellow-foreground-non-body': {
foreground: viraColorPalette['vira-yellow-650'],
},
'vira-yellow-foreground-header': {
foreground: viraColorPalette['vira-yellow-500'],
},
'vira-yellow-foreground-placeholder': {
foreground: viraColorPalette['vira-yellow-400'],
},
'vira-yellow-foreground-decoration': {
foreground: viraColorPalette['vira-yellow-350'],
},
'vira-yellow-foreground-invisible': {
foreground: viraColorPalette['vira-yellow-250'],
},
'vira-yellow-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-yellow-100'],
},
'vira-yellow-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-700'],
},
'vira-yellow-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-600'],
},
'vira-yellow-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-450'],
},
'vira-yellow-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-400'],
},
'vira-yellow-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-350'],
},
'vira-yellow-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-250'],
},
'vira-yellow-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-yellow-100'],
},
'vira-yellow-behind-fg-highest-contrast': {
background: viraColorPalette['vira-yellow-100'],
},
'vira-yellow-behind-fg-small-body': {
background: viraColorPalette['vira-yellow-250'],
},
'vira-yellow-behind-fg-body': {
background: viraColorPalette['vira-yellow-350'],
},
'vira-yellow-behind-fg-non-body': {
background: viraColorPalette['vira-yellow-400'],
},
'vira-yellow-behind-fg-header': {
background: viraColorPalette['vira-yellow-500'],
},
'vira-yellow-behind-fg-placeholder': {
background: viraColorPalette['vira-yellow-650'],
},
'vira-yellow-behind-fg-decoration': {
background: viraColorPalette['vira-yellow-750'],
},
'vira-yellow-behind-fg-invisible': {
background: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-on-self-highest-contrast': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-100'],
},
'vira-yellow-on-self-small-body': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-100'],
},
'vira-yellow-on-self-body': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-300'],
},
'vira-yellow-on-self-non-body': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-350'],
},
'vira-yellow-on-self-header': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-450'],
},
'vira-yellow-on-self-placeholder': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-550'],
},
'vira-yellow-on-self-decoration': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-650'],
},
'vira-yellow-on-self-invisible': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-1000'],
},
'vira-yellow-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-yellow-850'],
background: viraColorPalette['vira-yellow-1000'],
},
'vira-green-foreground-highest-contrast': {
foreground: viraColorPalette['vira-green-1000'],
},
'vira-green-foreground-small-body': {
foreground: viraColorPalette['vira-green-1000'],
},
'vira-green-foreground-body': {
foreground: viraColorPalette['vira-green-800'],
},
'vira-green-foreground-non-body': {
foreground: viraColorPalette['vira-green-650'],
},
'vira-green-foreground-header': {
foreground: viraColorPalette['vira-green-550'],
},
'vira-green-foreground-placeholder': {
foreground: viraColorPalette['vira-green-450'],
},
'vira-green-foreground-decoration': {
foreground: viraColorPalette['vira-green-350'],
},
'vira-green-foreground-invisible': {
foreground: viraColorPalette['vira-green-250'],
},
'vira-green-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-green-100'],
},
'vira-green-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-1000'],
},
'vira-green-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-1000'],
},
'vira-green-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-750'],
},
'vira-green-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-650'],
},
'vira-green-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-500'],
},
'vira-green-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-400'],
},
'vira-green-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-350'],
},
'vira-green-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-250'],
},
'vira-green-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-green-100'],
},
'vira-green-behind-fg-highest-contrast': {
background: viraColorPalette['vira-green-100'],
},
'vira-green-behind-fg-small-body': {
background: viraColorPalette['vira-green-250'],
},
'vira-green-behind-fg-body': {
background: viraColorPalette['vira-green-350'],
},
'vira-green-behind-fg-non-body': {
background: viraColorPalette['vira-green-450'],
},
'vira-green-behind-fg-header': {
background: viraColorPalette['vira-green-550'],
},
'vira-green-behind-fg-placeholder': {
background: viraColorPalette['vira-green-650'],
},
'vira-green-behind-fg-decoration': {
background: viraColorPalette['vira-green-800'],
},
'vira-green-behind-fg-invisible': {
background: viraColorPalette['vira-green-1000'],
},
'vira-green-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-green-1000'],
},
'vira-green-on-self-highest-contrast': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-100'],
},
'vira-green-on-self-small-body': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-100'],
},
'vira-green-on-self-body': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-300'],
},
'vira-green-on-self-non-body': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-400'],
},
'vira-green-on-self-header': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-450'],
},
'vira-green-on-self-placeholder': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-550'],
},
'vira-green-on-self-decoration': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-700'],
},
'vira-green-on-self-invisible': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-1000'],
},
'vira-green-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-green-850'],
background: viraColorPalette['vira-green-1000'],
},
'vira-teal-foreground-highest-contrast': {
foreground: viraColorPalette['vira-teal-1000'],
},
'vira-teal-foreground-small-body': {
foreground: viraColorPalette['vira-teal-1000'],
},
'vira-teal-foreground-body': {
foreground: viraColorPalette['vira-teal-800'],
},
'vira-teal-foreground-non-body': {
foreground: viraColorPalette['vira-teal-650'],
},
'vira-teal-foreground-header': {
foreground: viraColorPalette['vira-teal-550'],
},
'vira-teal-foreground-placeholder': {
foreground: viraColorPalette['vira-teal-450'],
},
'vira-teal-foreground-decoration': {
foreground: viraColorPalette['vira-teal-350'],
},
'vira-teal-foreground-invisible': {
foreground: viraColorPalette['vira-teal-250'],
},
'vira-teal-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-teal-100'],
},
'vira-teal-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-1000'],
},
'vira-teal-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-1000'],
},
'vira-teal-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-750'],
},
'vira-teal-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-600'],
},
'vira-teal-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-500'],
},
'vira-teal-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-400'],
},
'vira-teal-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-350'],
},
'vira-teal-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-250'],
},
'vira-teal-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-teal-100'],
},
'vira-teal-behind-fg-highest-contrast': {
background: viraColorPalette['vira-teal-100'],
},
'vira-teal-behind-fg-small-body': {
background: viraColorPalette['vira-teal-250'],
},
'vira-teal-behind-fg-body': {
background: viraColorPalette['vira-teal-350'],
},
'vira-teal-behind-fg-non-body': {
background: viraColorPalette['vira-teal-450'],
},
'vira-teal-behind-fg-header': {
background: viraColorPalette['vira-teal-500'],
},
'vira-teal-behind-fg-placeholder': {
background: viraColorPalette['vira-teal-650'],
},
'vira-teal-behind-fg-decoration': {
background: viraColorPalette['vira-teal-750'],
},
'vira-teal-behind-fg-invisible': {
background: viraColorPalette['vira-teal-1000'],
},
'vira-teal-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-teal-1000'],
},
'vira-teal-on-self-highest-contrast': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-100'],
},
'vira-teal-on-self-small-body': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-100'],
},
'vira-teal-on-self-body': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-300'],
},
'vira-teal-on-self-non-body': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-400'],
},
'vira-teal-on-self-header': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-450'],
},
'vira-teal-on-self-placeholder': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-550'],
},
'vira-teal-on-self-decoration': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-700'],
},
'vira-teal-on-self-invisible': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-1000'],
},
'vira-teal-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-teal-850'],
background: viraColorPalette['vira-teal-1000'],
},
'vira-blue-foreground-highest-contrast': {
foreground: viraColorPalette['vira-blue-1000'],
},
'vira-blue-foreground-small-body': {
foreground: viraColorPalette['vira-blue-1000'],
},
'vira-blue-foreground-body': {
foreground: viraColorPalette['vira-blue-750'],
},
'vira-blue-foreground-non-body': {
foreground: viraColorPalette['vira-blue-650'],
},
'vira-blue-foreground-header': {
foreground: viraColorPalette['vira-blue-500'],
},
'vira-blue-foreground-placeholder': {
foreground: viraColorPalette['vira-blue-450'],
},
'vira-blue-foreground-decoration': {
foreground: viraColorPalette['vira-blue-350'],
},
'vira-blue-foreground-invisible': {
foreground: viraColorPalette['vira-blue-250'],
},
'vira-blue-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-blue-100'],
},
'vira-blue-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-1000'],
},
'vira-blue-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-1000'],
},
'vira-blue-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-750'],
},
'vira-blue-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-600'],
},
'vira-blue-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-450'],
},
'vira-blue-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-400'],
},
'vira-blue-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-350'],
},
'vira-blue-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-250'],
},
'vira-blue-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-blue-100'],
},
'vira-blue-behind-fg-highest-contrast': {
background: viraColorPalette['vira-blue-100'],
},
'vira-blue-behind-fg-small-body': {
background: viraColorPalette['vira-blue-250'],
},
'vira-blue-behind-fg-body': {
background: viraColorPalette['vira-blue-350'],
},
'vira-blue-behind-fg-non-body': {
background: viraColorPalette['vira-blue-400'],
},
'vira-blue-behind-fg-header': {
background: viraColorPalette['vira-blue-500'],
},
'vira-blue-behind-fg-placeholder': {
background: viraColorPalette['vira-blue-650'],
},
'vira-blue-behind-fg-decoration': {
background: viraColorPalette['vira-blue-750'],
},
'vira-blue-behind-fg-invisible': {
background: viraColorPalette['vira-blue-1000'],
},
'vira-blue-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-blue-1000'],
},
'vira-blue-on-self-highest-contrast': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-100'],
},
'vira-blue-on-self-small-body': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-100'],
},
'vira-blue-on-self-body': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-300'],
},
'vira-blue-on-self-non-body': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-350'],
},
'vira-blue-on-self-header': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-450'],
},
'vira-blue-on-self-placeholder': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-550'],
},
'vira-blue-on-self-decoration': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-650'],
},
'vira-blue-on-self-invisible': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-1000'],
},
'vira-blue-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-blue-850'],
background: viraColorPalette['vira-blue-1000'],
},
'vira-brand-foreground-highest-contrast': {
foreground: viraColorPalette['vira-brand-1000'],
},
'vira-brand-foreground-small-body': {
foreground: viraColorPalette['vira-brand-1000'],
},
'vira-brand-foreground-body': {
foreground: viraColorPalette['vira-brand-750'],
},
'vira-brand-foreground-non-body': {
foreground: viraColorPalette['vira-brand-650'],
},
'vira-brand-foreground-header': {
foreground: viraColorPalette['vira-brand-500'],
},
'vira-brand-foreground-placeholder': {
foreground: viraColorPalette['vira-brand-450'],
},
'vira-brand-foreground-decoration': {
foreground: viraColorPalette['vira-brand-350'],
},
'vira-brand-foreground-invisible': {
foreground: viraColorPalette['vira-brand-250'],
},
'vira-brand-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-brand-100'],
},
'vira-brand-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-1000'],
},
'vira-brand-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-1000'],
},
'vira-brand-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-750'],
},
'vira-brand-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-600'],
},
'vira-brand-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-450'],
},
'vira-brand-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-400'],
},
'vira-brand-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-350'],
},
'vira-brand-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-250'],
},
'vira-brand-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-brand-100'],
},
'vira-brand-behind-fg-highest-contrast': {
background: viraColorPalette['vira-brand-100'],
},
'vira-brand-behind-fg-small-body': {
background: viraColorPalette['vira-brand-250'],
},
'vira-brand-behind-fg-body': {
background: viraColorPalette['vira-brand-350'],
},
'vira-brand-behind-fg-non-body': {
background: viraColorPalette['vira-brand-400'],
},
'vira-brand-behind-fg-header': {
background: viraColorPalette['vira-brand-500'],
},
'vira-brand-behind-fg-placeholder': {
background: viraColorPalette['vira-brand-650'],
},
'vira-brand-behind-fg-decoration': {
background: viraColorPalette['vira-brand-750'],
},
'vira-brand-behind-fg-invisible': {
background: viraColorPalette['vira-brand-1000'],
},
'vira-brand-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-brand-1000'],
},
'vira-brand-on-self-highest-contrast': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-100'],
},
'vira-brand-on-self-small-body': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-100'],
},
'vira-brand-on-self-body': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-300'],
},
'vira-brand-on-self-non-body': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-350'],
},
'vira-brand-on-self-header': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-450'],
},
'vira-brand-on-self-placeholder': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-550'],
},
'vira-brand-on-self-decoration': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-650'],
},
'vira-brand-on-self-invisible': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-1000'],
},
'vira-brand-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-brand-850'],
background: viraColorPalette['vira-brand-1000'],
},
'vira-purple-foreground-highest-contrast': {
foreground: viraColorPalette['vira-purple-1000'],
},
'vira-purple-foreground-small-body': {
foreground: viraColorPalette['vira-purple-1000'],
},
'vira-purple-foreground-body': {
foreground: viraColorPalette['vira-purple-750'],
},
'vira-purple-foreground-non-body': {
foreground: viraColorPalette['vira-purple-650'],
},
'vira-purple-foreground-header': {
foreground: viraColorPalette['vira-purple-500'],
},
'vira-purple-foreground-placeholder': {
foreground: viraColorPalette['vira-purple-400'],
},
'vira-purple-foreground-decoration': {
foreground: viraColorPalette['vira-purple-350'],
},
'vira-purple-foreground-invisible': {
foreground: viraColorPalette['vira-purple-250'],
},
'vira-purple-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-purple-100'],
},
'vira-purple-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-1000'],
},
'vira-purple-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-1000'],
},
'vira-purple-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-700'],
},
'vira-purple-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-600'],
},
'vira-purple-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-450'],
},
'vira-purple-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-400'],
},
'vira-purple-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-350'],
},
'vira-purple-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-200'],
},
'vira-purple-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-purple-100'],
},
'vira-purple-behind-fg-highest-contrast': {
background: viraColorPalette['vira-purple-100'],
},
'vira-purple-behind-fg-small-body': {
background: viraColorPalette['vira-purple-250'],
},
'vira-purple-behind-fg-body': {
background: viraColorPalette['vira-purple-350'],
},
'vira-purple-behind-fg-non-body': {
background: viraColorPalette['vira-purple-400'],
},
'vira-purple-behind-fg-header': {
background: viraColorPalette['vira-purple-500'],
},
'vira-purple-behind-fg-placeholder': {
background: viraColorPalette['vira-purple-600'],
},
'vira-purple-behind-fg-decoration': {
background: viraColorPalette['vira-purple-750'],
},
'vira-purple-behind-fg-invisible': {
background: viraColorPalette['vira-purple-1000'],
},
'vira-purple-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-purple-1000'],
},
'vira-purple-on-self-highest-contrast': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-100'],
},
'vira-purple-on-self-small-body': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-100'],
},
'vira-purple-on-self-body': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-300'],
},
'vira-purple-on-self-non-body': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-350'],
},
'vira-purple-on-self-header': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-450'],
},
'vira-purple-on-self-placeholder': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-500'],
},
'vira-purple-on-self-decoration': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-650'],
},
'vira-purple-on-self-invisible': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-1000'],
},
'vira-purple-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-purple-850'],
background: viraColorPalette['vira-purple-1000'],
},
'vira-pink-foreground-highest-contrast': {
foreground: viraColorPalette['vira-pink-1000'],
},
'vira-pink-foreground-small-body': {
foreground: viraColorPalette['vira-pink-1000'],
},
'vira-pink-foreground-body': {
foreground: viraColorPalette['vira-pink-750'],
},
'vira-pink-foreground-non-body': {
foreground: viraColorPalette['vira-pink-650'],
},
'vira-pink-foreground-header': {
foreground: viraColorPalette['vira-pink-500'],
},
'vira-pink-foreground-placeholder': {
foreground: viraColorPalette['vira-pink-400'],
},
'vira-pink-foreground-decoration': {
foreground: viraColorPalette['vira-pink-350'],
},
'vira-pink-foreground-invisible': {
foreground: viraColorPalette['vira-pink-250'],
},
'vira-pink-foreground-lowest-contrast': {
foreground: viraColorPalette['vira-pink-100'],
},
'vira-pink-behind-bg-highest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-1000'],
},
'vira-pink-behind-bg-small-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-1000'],
},
'vira-pink-behind-bg-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-700'],
},
'vira-pink-behind-bg-non-body': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-550'],
},
'vira-pink-behind-bg-header': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-450'],
},
'vira-pink-behind-bg-placeholder': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-400'],
},
'vira-pink-behind-bg-decoration': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-350'],
},
'vira-pink-behind-bg-invisible': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-200'],
},
'vira-pink-behind-bg-lowest-contrast': {
foreground: {
refDefaultBackground: true,
},
background: viraColorPalette['vira-pink-100'],
},
'vira-pink-behind-fg-highest-contrast': {
background: viraColorPalette['vira-pink-100'],
},
'vira-pink-behind-fg-small-body': {
background: viraColorPalette['vira-pink-200'],
},
'vira-pink-behind-fg-body': {
background: viraColorPalette['vira-pink-350'],
},
'vira-pink-behind-fg-non-body': {
background: viraColorPalette['vira-pink-400'],
},
'vira-pink-behind-fg-header': {
background: viraColorPalette['vira-pink-500'],
},
'vira-pink-behind-fg-placeholder': {
background: viraColorPalette['vira-pink-600'],
},
'vira-pink-behind-fg-decoration': {
background: viraColorPalette['vira-pink-750'],
},
'vira-pink-behind-fg-invisible': {
background: viraColorPalette['vira-pink-1000'],
},
'vira-pink-behind-fg-lowest-contrast': {
background: viraColorPalette['vira-pink-1000'],
},
'vira-pink-on-self-highest-contrast': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-100'],
},
'vira-pink-on-self-small-body': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-100'],
},
'vira-pink-on-self-body': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-250'],
},
'vira-pink-on-self-non-body': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-350'],
},
'vira-pink-on-self-header': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-450'],
},
'vira-pink-on-self-placeholder': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-500'],
},
'vira-pink-on-self-decoration': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-650'],
},
'vira-pink-on-self-invisible': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-1000'],
},
'vira-pink-on-self-lowest-contrast': {
foreground: viraColorPalette['vira-pink-850'],
background: viraColorPalette['vira-pink-1000'],
},
'vira-grey-foreground-highest-contrast': {