Feature Request: Improve discernability of various light mode background colours

[mao-sz]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Feature Request: brief description of feature request format, e.g. Feature Request: Add a dark mode to the website
• Would you like to work on this issue?

Description of the Feature Request

In dark mode, the assignment panel (.lesson-content__panel) and inline code blocks have distinctly different background colours to the page. In light mode, the page background is --color-gray-50 while the assignment panel and non-assignment inline code blocks are --color-gray-100, which on my screen are indiscernible from the page background. This feels unintentional. The assignment panel inline code blocks in light mode are --color-gray-200 which are distinct enough.

Acceptance criteria

In light mode only:

1. Background colour for assignment panel changed to --color-gray-200.
2. Background colour for non-assignment panel inline code blocks changed to --color-gray-200.
3. Background colour for assignment panel inline code blocks changed to --color-gray-300.
4. --tw-prose-code value changed to var(--color-pink-800). Without this, the original --color-pink-700 will fail AA contrast against --color-gray-300 within assignment panel inline code blocks (4.01). Bumping to pink800 will pass AA with a constrast of 5.36.

Additional Comments

Example of the above changes applied: