Replacing existing colors with npm module, and refactored Sass

[NetOpWibby]

This PR is unfinished, still have to go through the app and tweak.

[neb-b]

This is looking great. I really like the new font. I found a few issues and also have a few more generic comments.

• The input borders are gone. It looks like it can't find the variable
• The modal opacity makes it hard to read text actual content on the modal
• It's hard to read the help text next to the search suggestion
• The exact url match on the search page needs to be updated for the new dark mode
• Input/label input color needs to be updated for dark mode
• The table row headings are hard to see on dark mode, also the grey on grey text is hard to read on even numbered rows

[neb-b]

I'm not super sure about the new green color. I like the actual color but it's a lot harder to read buttons with white text. The contrast ratio is significantly lower than the previous combination which was already pretty low.

https://webaim.org/resources/contrastchecker/

[NetOpWibby]

@seanyesmunt Pushed up some changes. The $lbry-teal-5 color (#2f9176) is being used for all buttons now, due to its excellent contrast. It doesn't pass WCAG AAA though, only WCAG AA.

#1f614d passes all tests but it's also pretty dark.

[neb-b]

@NetOperatorWibby I don't think we have to pass all, teal-5 looks great. Way easier to read compared to teal-3

[neb-b]

The search page is looking better on dark mode. There are still some issues with placeholders.

The input background color is also a little tough to read on dark mode (both search and copyable inputs)
And the markdown input on the publish page

[NetOpWibby]

Alright, fixed inputs. Found a rather interesting bug/feature. When you highlight text and then switch themes, the selected text is white and will not fix itself unless you reload the app.

[NetOpWibby]

This is another good site for contrast testing: https://colorable.jxnblk.com/ffffff/2f9176

[neb-b]

A few last issues (I think)

The startup screen/snackbar/text highlighting should use teal-5 too

[neb-b]

A few last issues (I think)

The startup screen/snackbar/text highlighting should use teal-5 too

[neb-b]

Not super sure if we need this but I think that was for specificity

[neb-b]

@NetOperatorWibby After looking at some of the code more closely I'm starting to think we should keep the vars file. That would avoid the need for using nested rules in the dark theme scss file.

Currently in some cases, if any layout changes, the dark mode would break.

[NetOpWibby]

@seanyesmunt We lose the flexibility of using rgba functions and end up having more colors than necessary. I don't think layout changes are a strong argument. Dark mode would have to be checked out if changes are made regardless.

[neb-b]

@NetOperatorWibby Ah I didn't know we couldn't use rgba functions with that. Ok I'm fine with it. 👍

[NetOpWibby]

@seanyesmunt Do I need to do anything else to get this merged?

[neb-b]

I think the only thing left I've noticed is the text in the search bar is really hard to read on light mode. After that is fixed I think we can merge this.

[NetOpWibby]

Done

[neb-b]

I'm guessing there will be a few more things to fix before this is released but it's fine for now to begin testing.

[NetOpWibby]

Cool beans, I'll go through everything finely.