Port CSS overrides from /learn to base.css

[huyenltnguyen]

Description

Tailwind preflight removes some default browser styles while we are still using them (via Bootstrap).

I had to make some Tailwind overrides in freeCodeCamp/freeCodeCamp#55068, and those overrides should be moved to the base.css stylesheet of the UI library to ensure the default styles are consistent across downstream apps.

Note

This will be a breaking change as the added styles could affect the UI of the consumers.

[huyenltnguyen]

I've gone through the /learn styles, and I think the following styles should be excluded from the library's default:

• legend
  • color: #333 (code): The color isn't in our design system
  • border-bottom: 1px solid #e5e5e5 (code): The color isn't in our design system, and we don't use the border anywhere (in /learn anywhere legend is used, we have to override the border and set it to none)
• blockquote
  • border-left: 5px solid #eeeeee (code): The color should be changed to a color in our design system, it probably should be background-quaternary
• blockquote footer, blockquote small, blockquote .small (code): Should be removed from the global.css file. The :before styles can be moved to client/src/components/Intro/index.tsx, which is the only place needs it.