Welcome to the Pando documentation! This page will give you an introduction, from a design and developer experience, to the majority of the Pando concepts that you will use on a daily basis.
- How to use themes
- How to add styling and Accessibility via Headless-styles
- Using Icons
- How to add advanced logic with React Utils
Pando ships with theme support using design-tokens that utilize a semantic naming convention. This means that our themes are created to scale and be easily used for both the design and developer experience.
# "usage" is the only required property
- Sentiment - "default", "action", "info", "success", "warning", "danger"
- Usage (required) - "background", "border", "navigation", "surface", "text"
- Prominence - "default", "weak", "medium", "strong", "inverse"
- Interaction - "default", "hover", "active", "visited"
What this looks like in terms of an actual token can be seen in an example of some of the tokens:
Adding styles and Accessibility
It looks something like this:
This approach allows Pando to increase the performance of your application by relying on the use of Semantic HTML and plain JSX.
Icons help enhance our pages and features. Our Icons library was created to provide icons for different solutions, including: React, Svelte, and SVG icons.
Now that you know the basics of using Pando, check out a Tutorial to put them into practice.