vira 31.13.1 → 31.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -58,7 +58,8 @@ export type ViraThemeByKeys = {
|
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
60
|
/**
|
|
61
|
-
* All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level.
|
|
61
|
+
* All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level. See
|
|
62
|
+
* {@link viraTheme} for extensive documentation on what the colors pairs mean.
|
|
62
63
|
*
|
|
63
64
|
* @category Internal
|
|
64
65
|
*/
|
|
@@ -28,7 +28,8 @@ export const ViraThemeColorName = arrayToObject(viraThemeColorNames, (colorKey)
|
|
|
28
28
|
*/
|
|
29
29
|
export const allViraThemeKeys = getObjectTypedKeys(viraTheme.colors);
|
|
30
30
|
/**
|
|
31
|
-
* All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level.
|
|
31
|
+
* All {@link viraTheme} color pair grouped by their color name, pair name, and contrast level. See
|
|
32
|
+
* {@link viraTheme} for extensive documentation on what the colors pairs mean.
|
|
32
33
|
*
|
|
33
34
|
* @category Internal
|
|
34
35
|
*/
|
|
@@ -1,5 +1,188 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* A color theme
|
|
2
|
+
* A color theme designed for straightforward accessible foreground and background color choices.
|
|
3
|
+
* All color pairs can be seen here: https://electrovir.github.io/vira/book/styles/vira-theme.
|
|
4
|
+
*
|
|
5
|
+
* Consider using [`colorCss` from
|
|
6
|
+
* @electrovir/color](https://electrovir.github.io/color/docs/functions/colorCss.html) for applying
|
|
7
|
+
* a foreground and background color at the same time in CSS.
|
|
8
|
+
*
|
|
9
|
+
* ## Color Pairs
|
|
10
|
+
*
|
|
11
|
+
* Each color choice is stored in a color pair. Each color pair includes a foreground and a
|
|
12
|
+
* background color. Foreground and background color pairs are set to specific lightness levels to
|
|
13
|
+
* ensure a specific level of contrast, which you can choose from (as explained below). Most color
|
|
14
|
+
* pairs include a color interacting with the page default color pair. These page defaults depend on
|
|
15
|
+
* which theme you select: light mode or dark mode. The defaults are the following:
|
|
16
|
+
*
|
|
17
|
+
* - Light mode:
|
|
18
|
+
*
|
|
19
|
+
* - Foreground: black
|
|
20
|
+
* - Background: white
|
|
21
|
+
* - Dark mode:
|
|
22
|
+
*
|
|
23
|
+
* - Foreground: white
|
|
24
|
+
* - Background: black
|
|
25
|
+
*
|
|
26
|
+
* ## Choosing a Color
|
|
27
|
+
*
|
|
28
|
+
* Each color in the theme is a key following the pattern
|
|
29
|
+
* `vira-{colorName}-{pairType}-{contrastLevel}`. (Note that there is also `viraThemeByKeys`, which
|
|
30
|
+
* stores colors in nested objects, accessed with the pattern
|
|
31
|
+
* `viraThemeByKeys[colorName][pairType][contrastLevel]`.) The following steps explain how to select
|
|
32
|
+
* a color pair:
|
|
33
|
+
*
|
|
34
|
+
* 1. **Choose a color name.** Red, blue, etc. This is the color that you're trying to use.
|
|
35
|
+
*
|
|
36
|
+
* - Examples:
|
|
37
|
+
*
|
|
38
|
+
* - `viraTheme.colors['vira-red-foreground-body']`
|
|
39
|
+
* - `viraTheme.colors['vira-blue-foreground-body']`
|
|
40
|
+
* 2. **Choose a color pair type.** This determines where the color name you chose is placed in the
|
|
41
|
+
* color pair.
|
|
42
|
+
*
|
|
43
|
+
* - `foreground`: "Color in the foreground". In this color pair, the chosen color is the foreground
|
|
44
|
+
* and the page default background (white in light mode, black in dark mode) is the
|
|
45
|
+
* background. The lightness level of the foreground, the chosen color, varies based on the
|
|
46
|
+
* selected contrast level (in the next step).
|
|
47
|
+
*
|
|
48
|
+
* - Foreground: the chosen color (red, blue, etc.)
|
|
49
|
+
* - Background: the page default background (white in light mode, black in dark mode).
|
|
50
|
+
* - Example: `viraTheme.colors['vira-red-foreground-body']`
|
|
51
|
+
* - Example: `viraTheme.colors['vira-blue-foreground-body']`
|
|
52
|
+
* - `behind-fg`: "Color behind foreground". In this color pair, the chosen color is the background
|
|
53
|
+
* and the page default foreground (black in light mode, white in dark mode) is the
|
|
54
|
+
* background. The lightness level of the background, the chosen color, varies based on the
|
|
55
|
+
* selected contrast level (in the next step).
|
|
56
|
+
*
|
|
57
|
+
* - Foreground: the page default background (black in light mode, white in dark mode).
|
|
58
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
59
|
+
* - Example: `viraTheme.colors['vira-red-behind-fg-body']`
|
|
60
|
+
* - Example: `viraTheme.colors['vira-blue-behind-fg-body']`
|
|
61
|
+
* - `behind-bg`: "Color behind background". In this color pair, the chosen color is the background
|
|
62
|
+
* and the page default background (white in light mode, black in dark mode) is the
|
|
63
|
+
* foreground. The lightness level of the background, the chosen color, varies based on the
|
|
64
|
+
* selected contrast level (in the next step).
|
|
65
|
+
*
|
|
66
|
+
* - Foreground: the page default background (white in light mode, black in dark mode)
|
|
67
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
68
|
+
* - Example: `viraTheme.colors['vira-red-behind-bg-body']`
|
|
69
|
+
* - Example: `viraTheme.colors['vira-blue-behind-bg-body']`
|
|
70
|
+
* - `on-self`: "Color on self". In this color pair, both the foreground and the background are a
|
|
71
|
+
* shade of the chosen color. The lightness level of the background chosen color varies
|
|
72
|
+
* based on the selected contrast level (in the next step). The lightness of the foreground
|
|
73
|
+
* chosen color is fixed based on the current theme: a dark foreground in light mode, a
|
|
74
|
+
* light foreground in dark mode (to remain similar to the page default foreground color).
|
|
75
|
+
*
|
|
76
|
+
* - Foreground: the chosen color (red, blue, etc.)
|
|
77
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
78
|
+
* - Example: `viraTheme.colors['vira-red-on-self-body']`
|
|
79
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-body']`
|
|
80
|
+
* 3. **Choose a contrast level.** Choose a level of contrast based on what you are applying color to.
|
|
81
|
+
* In general, the `header` level of contrast gives a color shade that is not considered "light"
|
|
82
|
+
* or "dark". Any contrast level intended for smaller text elements (non-body, body, small-body)
|
|
83
|
+
* is a darker variant of that color. Any contrast level allowed on larger text elements
|
|
84
|
+
* (placeholder, decoration, invisible) is a lighter variant of that color. Also see
|
|
85
|
+
* https://electrovir.github.io/color/docs/variables/contrastLevels.html for more details on each
|
|
86
|
+
* contrast level.
|
|
87
|
+
*
|
|
88
|
+
* - `small-body`: Choose this for text or page elements that should be legible but are small in size
|
|
89
|
+
* (< 14px font size, similarly sized icons, etc.).
|
|
90
|
+
*
|
|
91
|
+
* - The color pair is chosen to ensure about Lc 90 contrast between the foreground and the
|
|
92
|
+
* background.
|
|
93
|
+
* - Example: `viraTheme.colors['vira-red-foreground-small-body']`: In light mode, this has a very
|
|
94
|
+
* dark red foreground.
|
|
95
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-small-body']`: In light mode, a very light blue is
|
|
96
|
+
* used as the background color. (The foreground is a very dark blue.)
|
|
97
|
+
* - `body`: Chose this for text or page elements that should be legible and are a normal body text
|
|
98
|
+
* size (>= 14px font size).
|
|
99
|
+
*
|
|
100
|
+
* - The color pair is chosen to ensure about Lc 75 contrast between the foreground and the
|
|
101
|
+
* background.
|
|
102
|
+
* - Example: `viraTheme.colors['vira-red-foreground-body']`: In light mode, this has a dark red
|
|
103
|
+
* foreground (not as dark as the `small-body` variant).
|
|
104
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-body']`: In light mode, a light blue background is
|
|
105
|
+
* used (but darker than the small-body contrast level). (The foreground is a very
|
|
106
|
+
* dark blue.)
|
|
107
|
+
* - `non-body`: Chose this for text or page elements that should be legible but are larger in size
|
|
108
|
+
* (>= 24px font size with normal font weight).
|
|
109
|
+
*
|
|
110
|
+
* - The color pair is chosen to ensure about Lc 60 contrast between the foreground and the
|
|
111
|
+
* background.
|
|
112
|
+
* - Example: `viraTheme.colors['vira-red-foreground-non-body']`: In light mode, this has slightly
|
|
113
|
+
* dark red foreground.
|
|
114
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-non-body']`: In light mode, a light blue background
|
|
115
|
+
* is used (but darker than the small-body contrast level). (The foreground is a
|
|
116
|
+
* very dark blue.)
|
|
117
|
+
* - `header`: Chose this for text or page elements that are heading or heading sized elements (>=24px
|
|
118
|
+
* bolded text or >=36px normal weight text).
|
|
119
|
+
*
|
|
120
|
+
* - The color pair is chosen to ensure about Lc 45 contrast between the foreground and the
|
|
121
|
+
* background.
|
|
122
|
+
* - Example: `viraTheme.colors['vira-red-foreground-header']`: In light mode, this has a very vibrant
|
|
123
|
+
* red foreground.
|
|
124
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-header']`: In light mode, a plain blue (not very
|
|
125
|
+
* dark or light) background is used.
|
|
126
|
+
* - `placeholder`: Chose this for text or page elements that are placeholders or disabled.
|
|
127
|
+
*
|
|
128
|
+
* - The color pair is chosen to ensure about Lc 30 contrast between the foreground and the
|
|
129
|
+
* background.
|
|
130
|
+
* - Example: `viraTheme.colors['vira-red-foreground-placeholder']`: In light mode, this has a light
|
|
131
|
+
* red foreground.
|
|
132
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-placeholder']`: In light mode, a dark blue
|
|
133
|
+
* background is used. (The foreground is a very dark blue.)
|
|
134
|
+
* - `decoration`: Chose this for decorative page elements such as borders that, if not visible to the
|
|
135
|
+
* user (many users may not be able to distinguish this color pair's foreground from the
|
|
136
|
+
* background), do not reduce the usability of the page.
|
|
137
|
+
*
|
|
138
|
+
* - The color pair is chosen to ensure about Lc 15 contrast between the foreground and the
|
|
139
|
+
* background.
|
|
140
|
+
* - Example: `viraTheme.colors['vira-red-foreground-decoration']`: In light mode, this has a very
|
|
141
|
+
* light red foreground.
|
|
142
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-decoration']`: In light mode, a darker blue
|
|
143
|
+
* background is used. (The foreground is a very dark blue.)
|
|
144
|
+
* - `invisible`: Choose this for decorative elements that are even harder-to-see (dimmer) than
|
|
145
|
+
* `decoration` elements. The foreground and background colors in a color pair in this
|
|
146
|
+
* contrast level should be treated as indistinguishable from each other to most of the
|
|
147
|
+
* human population.
|
|
148
|
+
*
|
|
149
|
+
* - The color pair is chosen to ensure Lc 0 contrast between the foreground and the background.
|
|
150
|
+
* - Example: `viraTheme.colors['vira-red-foreground-invisible']`: In light mode, this has an
|
|
151
|
+
* extremely light red foreground, essentially a pale pink.
|
|
152
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-invisible']`: In light mode, an extremely dark blue
|
|
153
|
+
* background is used. (The foreground is a very dark blue.)
|
|
154
|
+
*
|
|
155
|
+
* There are also auxiliary contrast levels available which do not correspond to any specific
|
|
156
|
+
* element usage on a page:
|
|
157
|
+
*
|
|
158
|
+
* - `highest-contrast`: Maximum possible contrast between the foreground and background (from the
|
|
159
|
+
* color palette). In many color pairs, this will be the same as the `small-body` contrast
|
|
160
|
+
* level.
|
|
161
|
+
* - `lowest-contrast`: Minimum possible contrast between the foreground and background (from the
|
|
162
|
+
* color palette). In many color pairs, this will be the same as the `invisible` contrast
|
|
163
|
+
* level.
|
|
164
|
+
*
|
|
165
|
+
* ## Examples
|
|
166
|
+
*
|
|
167
|
+
* To style an error message (red body text):
|
|
168
|
+
*
|
|
169
|
+
* ```css
|
|
170
|
+
* color: ${viraTheme.colors['vira-red-foreground-body'].foreground.value};
|
|
171
|
+
* ```
|
|
172
|
+
*
|
|
173
|
+
* To style a green banner with white text:
|
|
174
|
+
*
|
|
175
|
+
* ```css
|
|
176
|
+
* .banner {
|
|
177
|
+
* ${colorCss(viraTheme.colors['vira-green-behind-bg-body'])};
|
|
178
|
+
* }
|
|
179
|
+
* ```
|
|
180
|
+
*
|
|
181
|
+
* `viraThemeByKeys` for structured access:
|
|
182
|
+
*
|
|
183
|
+
* ```css
|
|
184
|
+
* color: ${viraThemeByKeys.red.foreground.body.foreground.value};
|
|
185
|
+
* ```
|
|
3
186
|
*
|
|
4
187
|
* @category Color
|
|
5
188
|
*/
|
|
@@ -2,7 +2,190 @@ import { defineColorThemeOverride } from 'theme-vir/dist/color-theme/color-theme
|
|
|
2
2
|
import { defineColorTheme } from 'theme-vir/dist/color-theme/color-theme.js';
|
|
3
3
|
import { viraColorPalette } from './vira-color-palette.js';
|
|
4
4
|
/**
|
|
5
|
-
* A color theme
|
|
5
|
+
* A color theme designed for straightforward accessible foreground and background color choices.
|
|
6
|
+
* All color pairs can be seen here: https://electrovir.github.io/vira/book/styles/vira-theme.
|
|
7
|
+
*
|
|
8
|
+
* Consider using [`colorCss` from
|
|
9
|
+
* @electrovir/color](https://electrovir.github.io/color/docs/functions/colorCss.html) for applying
|
|
10
|
+
* a foreground and background color at the same time in CSS.
|
|
11
|
+
*
|
|
12
|
+
* ## Color Pairs
|
|
13
|
+
*
|
|
14
|
+
* Each color choice is stored in a color pair. Each color pair includes a foreground and a
|
|
15
|
+
* background color. Foreground and background color pairs are set to specific lightness levels to
|
|
16
|
+
* ensure a specific level of contrast, which you can choose from (as explained below). Most color
|
|
17
|
+
* pairs include a color interacting with the page default color pair. These page defaults depend on
|
|
18
|
+
* which theme you select: light mode or dark mode. The defaults are the following:
|
|
19
|
+
*
|
|
20
|
+
* - Light mode:
|
|
21
|
+
*
|
|
22
|
+
* - Foreground: black
|
|
23
|
+
* - Background: white
|
|
24
|
+
* - Dark mode:
|
|
25
|
+
*
|
|
26
|
+
* - Foreground: white
|
|
27
|
+
* - Background: black
|
|
28
|
+
*
|
|
29
|
+
* ## Choosing a Color
|
|
30
|
+
*
|
|
31
|
+
* Each color in the theme is a key following the pattern
|
|
32
|
+
* `vira-{colorName}-{pairType}-{contrastLevel}`. (Note that there is also `viraThemeByKeys`, which
|
|
33
|
+
* stores colors in nested objects, accessed with the pattern
|
|
34
|
+
* `viraThemeByKeys[colorName][pairType][contrastLevel]`.) The following steps explain how to select
|
|
35
|
+
* a color pair:
|
|
36
|
+
*
|
|
37
|
+
* 1. **Choose a color name.** Red, blue, etc. This is the color that you're trying to use.
|
|
38
|
+
*
|
|
39
|
+
* - Examples:
|
|
40
|
+
*
|
|
41
|
+
* - `viraTheme.colors['vira-red-foreground-body']`
|
|
42
|
+
* - `viraTheme.colors['vira-blue-foreground-body']`
|
|
43
|
+
* 2. **Choose a color pair type.** This determines where the color name you chose is placed in the
|
|
44
|
+
* color pair.
|
|
45
|
+
*
|
|
46
|
+
* - `foreground`: "Color in the foreground". In this color pair, the chosen color is the foreground
|
|
47
|
+
* and the page default background (white in light mode, black in dark mode) is the
|
|
48
|
+
* background. The lightness level of the foreground, the chosen color, varies based on the
|
|
49
|
+
* selected contrast level (in the next step).
|
|
50
|
+
*
|
|
51
|
+
* - Foreground: the chosen color (red, blue, etc.)
|
|
52
|
+
* - Background: the page default background (white in light mode, black in dark mode).
|
|
53
|
+
* - Example: `viraTheme.colors['vira-red-foreground-body']`
|
|
54
|
+
* - Example: `viraTheme.colors['vira-blue-foreground-body']`
|
|
55
|
+
* - `behind-fg`: "Color behind foreground". In this color pair, the chosen color is the background
|
|
56
|
+
* and the page default foreground (black in light mode, white in dark mode) is the
|
|
57
|
+
* background. The lightness level of the background, the chosen color, varies based on the
|
|
58
|
+
* selected contrast level (in the next step).
|
|
59
|
+
*
|
|
60
|
+
* - Foreground: the page default background (black in light mode, white in dark mode).
|
|
61
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
62
|
+
* - Example: `viraTheme.colors['vira-red-behind-fg-body']`
|
|
63
|
+
* - Example: `viraTheme.colors['vira-blue-behind-fg-body']`
|
|
64
|
+
* - `behind-bg`: "Color behind background". In this color pair, the chosen color is the background
|
|
65
|
+
* and the page default background (white in light mode, black in dark mode) is the
|
|
66
|
+
* foreground. The lightness level of the background, the chosen color, varies based on the
|
|
67
|
+
* selected contrast level (in the next step).
|
|
68
|
+
*
|
|
69
|
+
* - Foreground: the page default background (white in light mode, black in dark mode)
|
|
70
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
71
|
+
* - Example: `viraTheme.colors['vira-red-behind-bg-body']`
|
|
72
|
+
* - Example: `viraTheme.colors['vira-blue-behind-bg-body']`
|
|
73
|
+
* - `on-self`: "Color on self". In this color pair, both the foreground and the background are a
|
|
74
|
+
* shade of the chosen color. The lightness level of the background chosen color varies
|
|
75
|
+
* based on the selected contrast level (in the next step). The lightness of the foreground
|
|
76
|
+
* chosen color is fixed based on the current theme: a dark foreground in light mode, a
|
|
77
|
+
* light foreground in dark mode (to remain similar to the page default foreground color).
|
|
78
|
+
*
|
|
79
|
+
* - Foreground: the chosen color (red, blue, etc.)
|
|
80
|
+
* - Background: the chosen color (red, blue, etc.)
|
|
81
|
+
* - Example: `viraTheme.colors['vira-red-on-self-body']`
|
|
82
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-body']`
|
|
83
|
+
* 3. **Choose a contrast level.** Choose a level of contrast based on what you are applying color to.
|
|
84
|
+
* In general, the `header` level of contrast gives a color shade that is not considered "light"
|
|
85
|
+
* or "dark". Any contrast level intended for smaller text elements (non-body, body, small-body)
|
|
86
|
+
* is a darker variant of that color. Any contrast level allowed on larger text elements
|
|
87
|
+
* (placeholder, decoration, invisible) is a lighter variant of that color. Also see
|
|
88
|
+
* https://electrovir.github.io/color/docs/variables/contrastLevels.html for more details on each
|
|
89
|
+
* contrast level.
|
|
90
|
+
*
|
|
91
|
+
* - `small-body`: Choose this for text or page elements that should be legible but are small in size
|
|
92
|
+
* (< 14px font size, similarly sized icons, etc.).
|
|
93
|
+
*
|
|
94
|
+
* - The color pair is chosen to ensure about Lc 90 contrast between the foreground and the
|
|
95
|
+
* background.
|
|
96
|
+
* - Example: `viraTheme.colors['vira-red-foreground-small-body']`: In light mode, this has a very
|
|
97
|
+
* dark red foreground.
|
|
98
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-small-body']`: In light mode, a very light blue is
|
|
99
|
+
* used as the background color. (The foreground is a very dark blue.)
|
|
100
|
+
* - `body`: Chose this for text or page elements that should be legible and are a normal body text
|
|
101
|
+
* size (>= 14px font size).
|
|
102
|
+
*
|
|
103
|
+
* - The color pair is chosen to ensure about Lc 75 contrast between the foreground and the
|
|
104
|
+
* background.
|
|
105
|
+
* - Example: `viraTheme.colors['vira-red-foreground-body']`: In light mode, this has a dark red
|
|
106
|
+
* foreground (not as dark as the `small-body` variant).
|
|
107
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-body']`: In light mode, a light blue background is
|
|
108
|
+
* used (but darker than the small-body contrast level). (The foreground is a very
|
|
109
|
+
* dark blue.)
|
|
110
|
+
* - `non-body`: Chose this for text or page elements that should be legible but are larger in size
|
|
111
|
+
* (>= 24px font size with normal font weight).
|
|
112
|
+
*
|
|
113
|
+
* - The color pair is chosen to ensure about Lc 60 contrast between the foreground and the
|
|
114
|
+
* background.
|
|
115
|
+
* - Example: `viraTheme.colors['vira-red-foreground-non-body']`: In light mode, this has slightly
|
|
116
|
+
* dark red foreground.
|
|
117
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-non-body']`: In light mode, a light blue background
|
|
118
|
+
* is used (but darker than the small-body contrast level). (The foreground is a
|
|
119
|
+
* very dark blue.)
|
|
120
|
+
* - `header`: Chose this for text or page elements that are heading or heading sized elements (>=24px
|
|
121
|
+
* bolded text or >=36px normal weight text).
|
|
122
|
+
*
|
|
123
|
+
* - The color pair is chosen to ensure about Lc 45 contrast between the foreground and the
|
|
124
|
+
* background.
|
|
125
|
+
* - Example: `viraTheme.colors['vira-red-foreground-header']`: In light mode, this has a very vibrant
|
|
126
|
+
* red foreground.
|
|
127
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-header']`: In light mode, a plain blue (not very
|
|
128
|
+
* dark or light) background is used.
|
|
129
|
+
* - `placeholder`: Chose this for text or page elements that are placeholders or disabled.
|
|
130
|
+
*
|
|
131
|
+
* - The color pair is chosen to ensure about Lc 30 contrast between the foreground and the
|
|
132
|
+
* background.
|
|
133
|
+
* - Example: `viraTheme.colors['vira-red-foreground-placeholder']`: In light mode, this has a light
|
|
134
|
+
* red foreground.
|
|
135
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-placeholder']`: In light mode, a dark blue
|
|
136
|
+
* background is used. (The foreground is a very dark blue.)
|
|
137
|
+
* - `decoration`: Chose this for decorative page elements such as borders that, if not visible to the
|
|
138
|
+
* user (many users may not be able to distinguish this color pair's foreground from the
|
|
139
|
+
* background), do not reduce the usability of the page.
|
|
140
|
+
*
|
|
141
|
+
* - The color pair is chosen to ensure about Lc 15 contrast between the foreground and the
|
|
142
|
+
* background.
|
|
143
|
+
* - Example: `viraTheme.colors['vira-red-foreground-decoration']`: In light mode, this has a very
|
|
144
|
+
* light red foreground.
|
|
145
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-decoration']`: In light mode, a darker blue
|
|
146
|
+
* background is used. (The foreground is a very dark blue.)
|
|
147
|
+
* - `invisible`: Choose this for decorative elements that are even harder-to-see (dimmer) than
|
|
148
|
+
* `decoration` elements. The foreground and background colors in a color pair in this
|
|
149
|
+
* contrast level should be treated as indistinguishable from each other to most of the
|
|
150
|
+
* human population.
|
|
151
|
+
*
|
|
152
|
+
* - The color pair is chosen to ensure Lc 0 contrast between the foreground and the background.
|
|
153
|
+
* - Example: `viraTheme.colors['vira-red-foreground-invisible']`: In light mode, this has an
|
|
154
|
+
* extremely light red foreground, essentially a pale pink.
|
|
155
|
+
* - Example: `viraTheme.colors['vira-blue-on-self-invisible']`: In light mode, an extremely dark blue
|
|
156
|
+
* background is used. (The foreground is a very dark blue.)
|
|
157
|
+
*
|
|
158
|
+
* There are also auxiliary contrast levels available which do not correspond to any specific
|
|
159
|
+
* element usage on a page:
|
|
160
|
+
*
|
|
161
|
+
* - `highest-contrast`: Maximum possible contrast between the foreground and background (from the
|
|
162
|
+
* color palette). In many color pairs, this will be the same as the `small-body` contrast
|
|
163
|
+
* level.
|
|
164
|
+
* - `lowest-contrast`: Minimum possible contrast between the foreground and background (from the
|
|
165
|
+
* color palette). In many color pairs, this will be the same as the `invisible` contrast
|
|
166
|
+
* level.
|
|
167
|
+
*
|
|
168
|
+
* ## Examples
|
|
169
|
+
*
|
|
170
|
+
* To style an error message (red body text):
|
|
171
|
+
*
|
|
172
|
+
* ```css
|
|
173
|
+
* color: ${viraTheme.colors['vira-red-foreground-body'].foreground.value};
|
|
174
|
+
* ```
|
|
175
|
+
*
|
|
176
|
+
* To style a green banner with white text:
|
|
177
|
+
*
|
|
178
|
+
* ```css
|
|
179
|
+
* .banner {
|
|
180
|
+
* ${colorCss(viraTheme.colors['vira-green-behind-bg-body'])};
|
|
181
|
+
* }
|
|
182
|
+
* ```
|
|
183
|
+
*
|
|
184
|
+
* `viraThemeByKeys` for structured access:
|
|
185
|
+
*
|
|
186
|
+
* ```css
|
|
187
|
+
* color: ${viraThemeByKeys.red.foreground.body.foreground.value};
|
|
188
|
+
* ```
|
|
6
189
|
*
|
|
7
190
|
* @category Color
|
|
8
191
|
*/
|