Adding color palette to the UI Kit

[yashsehgal]

Reason/Context

Adding color palette in the form of utilities will help in creating other molecule components.

Description

I think we can start adding styles and properties into the UI Kit and we can initiate by adding the color palette from Figma. We can start writing SCSS/Plain CSS (Let's discuss on the CSS as well) in the form of classes and root-variables which will be useful for future molecule components.

At the same time, we can create a new MDX file to list of the colors from the color palette. This will be better to keep the storybook documentation up-to-date.

Reference links

• https://vue.chakra-ui.com/theme
• https://design.economize.cloud/?path=/story/color-palette--blue

[mcturco]

@yashsehgal yes, I think we can begin to add these things into the design system docs.

As far as the CSS, we have been using tailwindcss across most things like website and tooling, so best to get with @magicmatatjahu on this but I think we need to continue our naming conventions with this framework in mind. You should see in the "Color" page in the Design System Figma file that I have begun out outline a naming convention to apply the colors and shades.

For example:
Let's say you wanted to apply the color Primary 500 to a text color. The class name to be applied would be this: text-primary-500

You can also look through the tailwindcss docs to get a better idea of how they document their default theme:
https://tailwindcss.com/docs/customizing-colors

[yashsehgal]

@yashsehgal yes, I think we can begin to add these things into the design system docs.

As far as the CSS, we have been using tailwindcss across most things like website and tooling, so best to get with @magicmatatjahu on this but I think we need to continue our naming conventions with this framework in mind. You should see in the "Color" page in the Design System Figma file that I have begun out outline a naming convention to apply the colors and shades.

For example: Let's say you wanted to apply the color Primary 500 to a text color. The class name to be applied would be this: text-primary-500

You can also look through the tailwindcss docs to get a better idea of how they document their default theme: https://tailwindcss.com/docs/customizing-colors

Yeah, the naming conventions are pretty good that you've added in the figma file. We can surely proceed with that, also colors like gray are matching the tailwind's class system. Like, in tailwind also we've color-gray-500, similar to ours. To avoid the overlap, we can edit the tailwind.config.js file in order to set gray shades.

What are your thoughts on this @magicmatatjahu ?

[magicmatatjahu]

@yashsehgal Like Missy mentioned, we should go using tailwind. In website, react-component, studio (in all front-end projects) we use tailwind and it works great. Tailwind is configurable and you can create your own classes (for colors etc) and plugins https://tailwindcss.com/docs/plugins so we can create our own plugin and use it wherever we want :)

If you will have any problem, or you will have any questions, please ping me or Missy :)

[yashsehgal]

Oh, Now it's clear. So we can configure our color palette using tailwind configurations according to the colors we have in figma. https://www.figma.com/file/lR082CeIYfpat5Uhz4eA4F/?node-id=2%3A160

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️