docs(fix): fix some wcag-aa color contrast issues

Author: userquin

docs/.vitepress/components/ListItem.vue

@@ -19,10 +19,10 @@ function reset() {
 const color = computed(() => {
   return {
     '--vp-c-brand-1': state.value === 1
-      ? '#66ba1c'
+      ? 'var(--vp-c-brand-1)'
       : state.value === 2
-        ? 'rgba(248, 113, 113)'
-        : 'rgba(250, 204, 21)',
+        ? 'var(--vp-c-red-1)'
+        : 'var(--vp-c-yellow-1)',
   } as any
 })
 
@@ -79,11 +79,11 @@ onMounted(async () => {
 
 .icon-spinner {
   animation: spin 1s linear infinite;
-  color: rgb(250, 204, 21);
+  color: var(--vp-c-yellow-1);
 }
 
 .icon-error {
-  color: rgb(248, 113, 113);
+  color: var(--vp-c-red-1);
 }
 
 .icon-success {

docs/.vitepress/theme/styles.css

@@ -5,11 +5,21 @@
 /* Vitest */
 :root[data-variant="vitest"] {
   --color-brand: #008039;
+  /* TODO: home page wcag-aa color contrast (remove this once fixed at void0 theme):
+   * - why vitest section and texts
+   * - vitest, resources, versions and social
+   * - footer
+   */
+  --color-grey: #867e8e;
+  /* TODO: code block (remove this once fixed at void0 theme) */
+  --vp-code-color: #007d38;
 }
 
 :root.dark:not([data-theme])[data-variant="vitest"],
 :root[data-theme="dark"][data-variant="vitest"] {
   --color-brand: var(--color-zest);
+  /* TODO: code block is fine on dark mode (remove this once fixed at void0 theme) */
+  --vp-code-color: var(--vp-c-brand-1);
 }
 
 :root[data-theme="light"][data-variant="vitest"] {
@@ -48,4 +58,4 @@ html:not(.dark) .VPContent kbd {
   padding: 2px 5px;
   position: relative;
   top: -1px;
-}
+}