Fix alt text contrast in code boxes (#2089)

This commit is contained in:
Robert Kaussow 2023-08-02 10:36:14 +02:00 committed by GitHub
parent dca01e6817
commit c36cb9da65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 3 deletions

View file

@ -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>

View file

@ -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');

View file

@ -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)',