[Docs] Create an example page that uses every theme color

[leecalcote]

Current State

Use each of these - https://github.com/layer5io/sistent/blob/master/src/theme/palette.ts

Desired State

---

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨Wireframes and designs for Sistent site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[avanshh99]

Hello @leecalcote can you assign me this issue?

[Aditi4275]

Hi @leecalcote , I’d like to work on this issue. Could you assign it to me? I’ve reviewed the details.

[leecalcote]

@avanshh99, @Aditi4275, Thanks much for jumping in and volunteering. In an effort to help guarantee your success in undertaking assignment of the issue, will you:

1. Confirm that you're able to build the project, specifically, the components necessary to resolve this issue.
2. Confirm the approach you intend to take to resolve the issue.

[divyansh-prks]

Hey guys i can also join you to help you there and the first thought is coming in my mind to solve this issue with this approach -

[Aditi4275]

@leecalcote After going through https://github.com/layer5io/sistent/blob/master/src/theme/palette.ts, I decided two approaches in order to build the example page:

Choose the light/dark mode

Approach 1:
[Topic name]
[color box] : [the functionality]
ex:
cta:

• █ (saffron[40]) : default
• █ (saffron[50]) : hover
• █ (saffron[60]) : pressed
• █ (saffron[60]) : secondary
• █ (saffron[70]) : tertiary

Approach 2:
[Topic name]
[Functionality with that specific color itself]
ex:
cta:

• default (written with saffron[40])
• hover (written with saffron[50])
• pressed (written with saffron[60])
• secondary (written with saffron[60])
• tertiary (written with saffron[70])

[leecalcote]

My apologies for not seeing these messages sooner.

@vr-varad @FaheemOnHub @M-DEV-1, you gents might offer guidance, feedback here.