From c36cb9da65dc50e1074f032e7b3c81de37d92e99 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 2 Aug 2023 10:36:14 +0200
Subject: [PATCH] Fix alt text contrast in code boxes (#2089)

---
 web/src/components/repo/pipeline/PipelineLog.vue | 6 +++---
 web/src/style.css                                | 2 ++
 web/windi.config.ts                              | 3 +++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 1acd3ec0069..55d36fb9072 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -40,7 +40,7 @@
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
+            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -61,7 +61,7 @@
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pr-1"
+            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pr-1"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -81,7 +81,7 @@
 
       <div
         v-if="step?.end_time !== undefined"
-        class="flex items-center w-full bg-wp-code-100 text-md text-wp-text-alt-100 p-4 font-bold"
+        class="flex items-center w-full bg-wp-code-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
       >
         <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
         <span class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
diff --git a/web/src/style.css b/web/src/style.css
index f79285552ba..0855c2ef14a 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -42,6 +42,7 @@
   --wp-code-100: theme('colors.int-wp-secondary.300');
   --wp-code-200: theme('colors.int-wp-secondary.600');
   --wp-code-text-100: theme('colors.gray.200');
+  --wp-code-text-alt-100: theme('colors.gray.300');
 
   --wp-link-100: theme('colors.blue.600');
   --wp-link-200: theme('colors.blue.700');
@@ -90,6 +91,7 @@
   --wp-code-100: theme('colors.int-wp-secondary.700');
   --wp-code-200: theme('colors.int-wp-secondary.800');
   --wp-code-text-100: theme('colors.gray.300');
+  --wp-code-text-alt-100: theme('colors.gray.400');
 
   --wp-link-100: theme('colors.blue.400');
   --wp-link-200: theme('colors.blue.500');
diff --git a/web/windi.config.ts b/web/windi.config.ts
index ec6443954c4..cdcfc551d37 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -195,6 +195,9 @@ export default defineConfig({
         'wp-code-text': {
           100: 'var(--wp-code-text-100)',
         },
+        'wp-code-text-alt': {
+          100: 'var(--wp-code-text-alt-100)',
+        },
 
         'wp-link': {
           100: 'var(--wp-link-100)',