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

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(--color-brand)'
       : state.value === 2
-        ? 'rgba(248, 113, 113)'
-        : 'rgba(250, 204, 21)',
+        ? 'var(--vp-c-red-1)'
+        : 'var(--vp-c-yellow-1)',
   } as any
 })
 
@@ -42,7 +42,9 @@ onMounted(async () => {
   <li :style="color">
     <div ref="el" class="icon-container">
       <div class="icon-wrapper" :class="state ? 'flip' : ''">
-        <Icon icon="carbon:circle-dash" class="icon-spinner" width="1.2em" height="1.2em" />
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 32 32" class="icon-spinner">
+          <circle cx="16" cy="16" r="13" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="8 4" />
+        </svg>
       </div>
       <div class="icon-wrapper" :class="state === 2 ? '' : 'flip'">
         <Icon icon="carbon:close-outline" class="icon-error" width="1.2em" height="1.2em" />
@@ -79,15 +81,15 @@ 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 {
-  color: var(--vp-c-brand-1);
+  color: var(--color-brand);
 }
 
 @keyframes spin {

docs/.vitepress/theme/styles.css

@@ -5,15 +5,24 @@
 /* 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;
 }
 
 :root.dark:not([data-theme])[data-variant="vitest"],
 :root[data-theme="dark"][data-variant="vitest"] {
   --color-brand: var(--color-zest);
 }
 
+:root[data-variant="vitest"]:not(.dark):not([data-theme="light"]),
 :root[data-theme="light"][data-variant="vitest"] {
   --color-brand: #008039;
+  /* TODO: code block (remove this once fixed at void0 theme) */
+  --vp-code-color: #007d38;
 }
 
 
@@ -48,4 +57,4 @@ html:not(.dark) .VPContent kbd {
   padding: 2px 5px;
   position: relative;
   top: -1px;
-}
+}