[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
docs: fix some wcag-aa color contrast issues (#9468)
authored by
Joaquín Sánchez
and committed by
GitHub
(Jan 21, 2026, 7:09 PM +0100)
2a60cf8d
39342065
+19
-8
+9
-7
docs/.vitepress/components/ListItem.vue
+9
-7
docs/.vitepress/components/ListItem.vue
···
19
19
const color = computed(() => {
20
20
return {
21
21
'--vp-c-brand-1': state.value === 1
22
-
? '#66ba1c'
22
+
? 'var(--color-brand)'
23
23
: state.value === 2
24
-
? 'rgba(248, 113, 113)'
25
-
: 'rgba(250, 204, 21)',
24
+
? 'var(--vp-c-red-1)'
25
+
: 'var(--vp-c-yellow-1)',
26
26
} as any
27
27
})
28
28
···
42
42
<li :style="color">
43
43
<div ref="el" class="icon-container">
44
44
<div class="icon-wrapper" :class="state ? 'flip' : ''">
45
-
<Icon icon="carbon:circle-dash" class="icon-spinner" width="1.2em" height="1.2em" />
45
+
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 32 32" class="icon-spinner">
46
+
<circle cx="16" cy="16" r="13" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="8 4" />
47
+
</svg>
46
48
</div>
47
49
<div class="icon-wrapper" :class="state === 2 ? '' : 'flip'">
48
50
<Icon icon="carbon:close-outline" class="icon-error" width="1.2em" height="1.2em" />
···
79
81
80
82
.icon-spinner {
81
83
animation: spin 1s linear infinite;
82
-
color: rgb(250, 204, 21);
84
+
color: var(--vp-c-yellow-1);
83
85
}
84
86
85
87
.icon-error {
86
-
color: rgb(248, 113, 113);
88
+
color: var(--vp-c-red-1);
87
89
}
88
90
89
91
.icon-success {
90
-
color: var(--vp-c-brand-1);
92
+
color: var(--color-brand);
91
93
}
92
94
93
95
@keyframes spin {
+10
-1
docs/.vitepress/theme/styles.css
+10
-1
docs/.vitepress/theme/styles.css
···
5
5
/* Vitest */
6
6
:root[data-variant="vitest"] {
7
7
--color-brand: #008039;
8
+
/* TODO: home page wcag-aa color contrast (remove this once fixed at void0 theme):
9
+
* - why vitest section and texts
10
+
* - vitest, resources, versions and social
11
+
* - footer
12
+
*/
13
+
--color-grey: #867e8e;
8
14
}
9
15
10
16
:root.dark:not([data-theme])[data-variant="vitest"],
···
12
18
--color-brand: var(--color-zest);
13
19
}
14
20
21
+
:root[data-variant="vitest"]:not(.dark):not([data-theme="light"]),
15
22
:root[data-theme="light"][data-variant="vitest"] {
16
23
--color-brand: #008039;
24
+
/* TODO: code block (remove this once fixed at void0 theme) */
25
+
--vp-code-color: #007d38;
17
26
}
18
27
19
28
···
48
57
padding: 2px 5px;
49
58
position: relative;
50
59
top: -1px;
51
-
}
60
+
}