Fix alt text contrast in code boxes (#2089)

woodpecker-ci · Aug 2, 2023 · c36cb9d · c36cb9d
1 parent dca01e6
commit c36cb9d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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)',