Set the design system color

[bjohansebas]

It would be great to start using CSS variables to maintain consistency in colors. I've been trying to do this in previous PRs, but I think it's time to define it completely. This way, we could simplify dark mode and solve several issues with !important.

Inspired by how shadcn/ui handles colors, I'm going to leave a list of colors we could use:

Light mode:

--bg: #ffffff (background)
--fg: #383838 (general texts)
--card-bg: #f0f1f3 (header, code blocks, announcement, etc)
--card-fg: #383838
--hover-bg: #484848 (hover background)
--hover-fg: #fafafa (hover foreground)
--border: #d9e1e4 (borders)
--accent: #0e78ce (Links)

Dark mode:

--bg: #0c0c0c
--fg: #fafafa (general texts)
--card: #181818 (header, code blocks, announcement, etc)
--card-foreground: #71717A
--hover-bg: #484848 (hover background)
--hover-fg: #fafafa (hover foreground)
--border: #d9e1e4
--accent: #2b8fe0 (Links, hover background)

cc/: @expressjs/docs-wg

[chrisdel101]

Are we changing the colors too? For dark mode I pulled almost all the colors from github's dark mode. Are we changing darkmode colors for changes sake only?
Or because we're not satisfied with the ones we have? If it's the first reason, I suggest we leave them. I could be convinced otherwise though if there is a reason :)

I agree with the rest of the stuff. Maybe we can integrate scss here too? If it's not too much work that is. Makes systems like this easier to maintain. Plain CSS is also fine if not.

If no one is working on this I can start.

[bjohansebas]

It is not necessary to change all the colors of the dark mode, just to improve a bit the contrast between the colors. They look fine on a computer, but on mobile, they are almost the same (it also depends on the screen). However, if you don’t want to, that’s okay. What I do want is to put all the colors in css variables.

Maybe we can integrate scss here too? If it's not too much work that is. Makes systems like this easier to maintain. Plain css is also fine if not.

I have never used it, and I don't know how it would integrate with Jekyll. I preferred that we continue using plain css. In the end, css has evolved quite a bit and now has several features that scss has (nesting and variables, I think, are the most important), and browser support has improved significantly.

[chrisdel101]

I didn't know you could nest in CSS! This was one of scss's main uses, plus it has functions. it look like jekyll supports it, but I'm good with plain CSS.

but on mobile, they are almost the same (it also depends on the screen).

If you've encountered it then we can try out the colors you put above.

[chrisdel101]

Do we want the variable in hex or RBG? I'd prefer all vars to be one or the other so we can compare them easier. In order I prefer names when possible, hex, then RGB. Hex okay?

[bjohansebas]

I prefer hex