Fix error color contrast in dark theme (#2778)

This commit is contained in:
Lauris BH 2023-11-09 08:07:20 +02:00 committed by GitHub
parent 4c2dbca2e9
commit 6f07f2acf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 10 deletions

View file

@ -8,7 +8,8 @@
color === 'gray',
'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white dark:text-dark-300':
color === 'red',
...passedClasses,
}"
:title="title"

View file

@ -54,8 +54,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
display: block;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
transform: translate(-50%, -50%);

View file

@ -3,7 +3,6 @@
<div class="flex flex-wrap items-center">
<Button
class="mr-4 my-1"
color="blue"
start-icon="heal"
:is-loading="isRepairingRepo"
:text="$t('repo.settings.actions.repair.repair')"
@ -13,7 +12,6 @@
<Button
v-if="isActive"
class="mr-4 my-1"
color="blue"
start-icon="turn-off"
:is-loading="isDeactivatingRepo"
:text="$t('repo.settings.actions.disable.disable')"

View file

@ -3,7 +3,7 @@
<!-- TODO: Should use vue notifications. -->
<div
v-if="errorMessage"
class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white dark:text-dark-300 p-4 rounded-md"
>
{{ errorMessage }}
</div>

View file

@ -79,16 +79,16 @@ export default defineConfig({
300: colors.red[900],
},
'int-wp-control-error-dark': {
100: tinycolor(colors.red[700]).desaturate(25).toString(),
200: tinycolor(colors.red[800]).desaturate(25).toString(),
300: tinycolor(colors.red[900]).desaturate(25).toString(),
100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
200: tinycolor(colors.red[800]).saturate(80).brighten(30).toString(),
300: tinycolor(colors.red[900]).saturate(80).brighten(30).toString(),
},
'int-wp-state-error': {
100: colors.red[700],
},
'int-wp-state-error-dark': {
100: tinycolor(colors.red[700]).desaturate(25).toString(),
100: tinycolor(colors.red[700]).saturate(100).brighten(40).toString(),
},
'int-wp-state-neutral': {
100: colors.gray[600],