Bug: Inline Code Blocks Color Does Not Appear Correctly

[ZackHoang]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Bug: brief description of bug format, e.g. Bug: Lesson complete button does not update on click
• Would you like to work on this issue?

Bug description

I remember the inline code blocks present in TOP have always been pink-ish rather than white. Not a major bug, but having the commands appearing in a different color rather than white makes the command stand out a bit more, I think, in terms of users' experience.

How to reproduce

Visit any lesson with inline code blocks included

Expected behavior

Inline code blocks should be in pink-ish rather than white

What browsers are you seeing the problem on?

Chrome

What OS are you using?

Ubuntu

Discord Name

vietanhhoang2507

Additional Comments

No response

[JoshDevHub]

git bisect tells me that this was a consequence of #5173 --probably unintentional?

I'm willing to assign you and I think the pink text looks much better myself. I'd just like to know why it's suddenly behaving this way (as that will likely lead to the best way to fix it, which may not necessarily be throwing some CSS at it). @mao-sz do you have any insight?

[mao-sz]

theodinproject/tailwind.config.js

Line 44 in f0c957a

'--tw-prose-code': 'var(--colors-pink-700)',

Should be --color-pink-700 (singular color) - my mistake when converting the syntax. Same applies for all the other var() in that file.

That being said, I missed that prose-gray customisation does have a CSS-config format not (only the typography.DEFAULT stuff is still pinned to a JS config file).

tailwind.config.js:42-46 can be deleted, then in app/assets/stylesheets/custom_styles/typography.css, the following can be added somewhere in there:

/* More visually distinctive inline code blocks
   https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#adding-custom-color-themes */
@utility prose-gray {
  --tw-prose-code: var(--color-pink-700);
  --tw-prose-invert-code: var(--color-pink-400);
}

i.e. steps required:

1. Migrate the prose-gray customisation to the CSS format as above.
2. Fix the remaining two 'var(--colors-gray-800)' in tailwind.config.js to be 'var(--color-gray-800)'

[JoshDevHub]

@ZackHoang Any update on this?

[ZackHoang]

@ZackHoang Any update on this?

I haven't worked on this since I'm still not sure if it's a good time to install npm packages at the moment.

If this needs to be fixed ASAP, I'm willing to let another person have a go at it.