Skip to main content

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.

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

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

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.

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.