search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
17.59k stars 2.75k forks source link

Markdown Editor has contrast issues in dark mode #9497

Closed jobara closed 8 months ago

jobara commented 10 months ago

Package

filament/forms

Package Version

v3.0.83

Laravel Version

v10.28.0

Livewire Version

v3.0.8

PHP Version

PHP 8.1.24

Problem description

The markdown editor has many contrast issues for the formatted text. The list items are virtually unreadable and others are also below WCAG AA standards.

Screenshot showing low contrast in dark mode

Text should be 4.5:1 ratio unless it is large or bold text, then I can be 3:1. (see: MDN Color Contrast)

Expected behavior

The contrast should be at least WCAG AA compliant.

Steps to reproduce

  1. Go to the create demo
  2. change to the dark mode
  3. enter markdown syntax into the markdown editor.

I linked to the filament repo because it's reproducible in your own demo.

Reproduction repository

https://github.com/jobara/filament-demo

Relevant log output

No response

github-actions[bot] commented 10 months ago

Hey @jobara! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

jobara commented 10 months ago

The quote is actually below WCAG AA contrast in light mode as well, being only 3.48:1.

github-actions[bot] commented 10 months ago

Thank you for providing reproduction steps! Reopening the issue now.

zepfietje commented 10 months ago

We're aware of this issue, as we haven't been able to add dark mode styles for the Markdown editor in time for v3.

Feel free to work on this already if you want though. 🙂