[improve]: Standardize colors used in Bytechef

[kresimir-coko]

Improvement target

We want to standardize colors in Bytechef so that both the design and frontend is always synchronized, and to improve the code at the same time. Currently our colors are all over the place, using a mix of shadcn, tailwind and custom colors to achieve what we want. This makes it so that, as developers, we never know which color to use where.

Goal of this issue is to fix that problem on the development side, while also setting a standard for current and future designs in Bytechef.

Improvement description

Here's our current "documentation" of colors defined for use in Bytechef (note: we don't necessarily use all of them, and we definitely use colors not in this list, probably all from Tailwind).

@akala444 you will need to analyze and implement a new naming convention using industry standards (semantic naming scheme probably).

---

Requirements

• [ ] Defined color palette to be used inside Bytechef
• [ ] Defined naming convention that is designer and developer friendly (to be used with Tailwind's prefixes like bg, border, text...) so don't use those for naming colors
• [ ] Defined list of all color names and color values (HSL preferably but the conversion can be done by the developer if needed) to be used in the above linked components.css file. Feel free to change all of the colors listed in the components.css file (at least their names, as we will probably want to keep some of the neutral colors).

---

Resources:

• https://www.youtube.com/watch?v=1DTnojio89Y (probably the best naming convention IMO)
• https://www.subframe.com/blog/how-to-setup-semantic-tailwind-colors (only skimmed over it)

don't follow these blindly, I have only skimmed these so they might not be ideal for us

Observed Version

master

[akala444]

1. Naming system. Based on my research I defined this naming system, check it out here.

2. Color pallete. I used a custom color (pulled it from the logo and modified it for good contrast) for branding and the others were from tailwind. Check it out here.

3. List of all colors. I've come up with a documentation of color names, a short description of their use cases and how to use them. Check it out here.

*Note: I don't expect this documentation to be the final version because through practice we'll probably name something a bit different or add new colors. Good thing is that I can change color names and values without too much struggle.