[Front-End] Implement Radix Colors

[eryc-cc]

We're using Radix Colors for most of our designs. They have an easy implementation here: https://www.radix-ui.com/colors.

These are the colors:

• Slate
• Orange
• Amber
• Blue
• Cyan
• Grass
• Red
• Teal

Installing Radix UI Colors:

// with npm
npm install @radix-ui/colors

// with yarn
yarn add @radix-ui/colors

You can also pick the colors from this Figma file: https://www.figma.com/file/paPYxS00vWq3pqPh4EJAxi/Radix-Colors-(Community)?node-id=0%3A1

--

Needs from designer:

• Flag which color palettes to use (we don't need all of them).

[eryc-cc]

I might close this issue, because it might not be necessary.

Tailwind already has great colors, I just didn't know about them: https://tailwindcss.com/docs/customizing-colors.

[eryc-cc]

Update: I think we'll implement Radix Colors because it'll make our lives easier when implementing Dark Mode.

TailwindCSS has colors from 50, 100, 200, ..., 900. This means we'd have to go through each component and individually update the color for Dark Mode.

With Radix Colors, the colors go from 1 to 12. When you switch from light to dark, the number stays the same, and the colors are already tested to work, if we stick to their guidelines. Much easier to maintain. ✨

I'll set it up soon.

@chadstewart @bdougie

[github-actions]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀