Quick Start

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.

You will learn

• How to use themes
• How to add styling and Accessibility via Headless-styles
• Using Icons
• How to add advanced logic with React Utils

Using Themes

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

ps-[sentiment?]-[usage]-[prominence?]-[interaction?]

• 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:

Example of tokens (not actual values)

:root {
  --ps-border-weak: #000;
  --ps-text: #000;
  --ps-action-text: #fff;
  --ps-action-background-hover: #fff1;
}

Adding styles and Accessibility

In Pando, our React library is responsible for styling components and making sure they are accessbile. We do this by using our Headless-styles library of Javascript helper functions that deliver the component props you need.

It looks something like this:

Result

Loading...

Live Editor

function ButtonExample() { return <Button sentiment="action">Action</Button> }

function ButtonExample() {
  return <Button sentiment="action">Action</Button>
}

This approach allows Pando to increase the performance of your application by relying on the use of Semantic HTML and plain JSX.

Using Icons

Icons help enhance our pages and features. Our Icons library was created to provide icons for different solutions, including: React, Svelte, and SVG icons.

Result

Loading...

Live Editor

function IconButtonExample() { return <IconButton icon={PlaceholderIcon} /> }

function IconButtonExample() {
  return <IconButton icon={PlaceholderIcon} />
}

Next Steps

Now that you know the basics of using Pando, check out a Tutorial to put them into practice.