Customizing Themes

Our semantic token system allows for easily customizing the themes depending on your use case.

This page assumes you are using the initial setup. If you would like to have access to the Pando themes without using the setup, see the Using design-tokens section.

Customizing with CSS

In CSS, we set the default theme in the :root selector via our initial setup, so all you need to do is overwrite the tokens you want to customize in the :root CSS selector of your project.

For example, in your root CSS file, add this:

:root {
  --ps-text: #fff;
}

To customize a specific theme in Pando (i.e. light, dark, etc.), you need to target the corresponding selectors.

For example, to modify the "light" theme, add this to your CSS:

html[data-theme='light'],
.pando-light {
  --ps-text: #000;
}

Class level customizing

In rare cases, you may only need to update a token value for a specific component. For this scenario, update the token within the specific class scope you need.

In this example, we are updating the default/text token for a component using the .card class:

.card {
  --ps-text: #fff;
  color: var(--ps-text);
}

Customizing with Javascript

If you are using a CSS-in-JS styling solution, you can easily extend our themes depending on your technology choice.

Style Objects

If you are using a technology that utilizes Javascript Objects for styles and only need the styles from Pando components, you can use our Style Objects.

import { <component>Styles } from '@pluralsight/headless-styles/styles'

Here is an example where we are using Style Objects to extend a Chakra Button.

import { extendTheme } from '@chakra-ui/react'
import type { StyleFunctionProps } from '@chakra-ui/styled-system'
import { buttonStyles } from '@pluralsight/headless-styles/styles'

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: buttonStyles.pando_actionButton,
      defaultProps: {
        ...
      },
    },
  },
})

export default theme

All of our component Style Objects use the nested property syntax supported by emotion and styled-components. If your tech uses any other syntax (like Chakra), you will need to add the additional styles to your theme with Object Spreading from the Style Object properties.

String Value Tokens

You can use a string value of the CSS token and it will automagically work! This is because browsers will map the token value from the Style Object to the CSS variable.

In this example, we use Emotion to update a Link to use the Pando Link token:

import styled from '@emotion/styled'

const TextLink = styled.a({
  color: 'var(--ps-action-navigation)',
})

Using Design-tokens

If you would like access to all of our design tokens without using our CSS Reset, you can install the Design-tokens package, which will deliver Javascript variables for all of the tokens:

npm
Yarn
pnpm

npm install @pluralsight/design-tokens

yarn add @pluralsight/design-tokens

pnpm add @pluralsight/design-tokens

The design-tokens package is the single source of truth for themes in the Pando ecosystem.

Web

We ship CSS custom properties, SCSS variables, JS es6/commonJS modules, and meta-data for web projects. This way, you can choose whichever solution works best for your project.

CSS Usage

There are two ways to use the tokens via CSS

With the initial setup (recommended)
Manually importing

With the initial setup

We ship all the tokens and themes in our initial setup - so there is no additional work for you to do. After you have completed the setup you will be able to reference the tokens in your CSS files.

button {
  background-color: var(--ps-action-background);
  color: var(--ps-action-text);
}

button:hover {
  background-color: var(--ps-action-background-hover);
}

Manually importing

If you would prefer to opt-out of our initial setup, you can import the tokens in your root CSS file.

@import url('@pluralsight/design-tokens/npm/css/variables.css');
@import url('@pluralsight/design-tokens/npm/themes/light.css');

SCSS

If you use SCSS in your project, you can import our SCSS variables.

@use '@pluralsight/design-tokens/npm/scss/_dark-variables.scss';
@use '@pluralsight/design-tokens/npm/scss/_light-variables.scss';

Then, use them as normal.

button {
  background-color: $ps-action-background;
  color: $ps-action-text;
}

Javascript Tokens

There are a few ways you can utilize the Javascript tokens:

Using the tokens meta-data combined with the initial setup (recommended)
Using the tokens without the initial setup
Using the tokens with inline styles

1. Using the tokens meta-data with initial (recommended)

See CSS Properties section.

2. Using the tokens without the initial setup

If you choose to opt-out of using the initial setup, you will only have static tokens available for use.

// theme.js
import { psBackground } from '@pluralsight/design-tokens'
import { psBackgroundLight } from '@pluralsight/design-tokens/light'

const darkTheme = {
  background: psBackground
}

const lightTheme = {
  background: psBackgroundLight
}

// Some component
const styles = css((theme) => {
  backgroundColor: theme.background,
})

3. Using tokens with inline styles

You can also use the static JS tokens inline as well.

<button
  style={{
    backgroundColor: psActionBackground,
  }}
/>

Web Meta

Sometimes you need something more than just a token. We provide two meta-data files for these use cases.

CSS Properties

If you are looking for a seamless JS integration with the Normalize setup or single-source-of-truth, we provide a module that exports JS tokens that have the CSS token names for the values.

When you combine this with CSS definitions, it "just works".

export const psBackground = 'var(--ps-background)'

This is much more performant if you are using a solution that creates CSS files from your JS defintions (i.e. styled-components).

import styled from 'styled-components'
import { psBackground } from '@pluralsight/design-tokens/meta/cssProperties'

const Button = styled(Button)`
  background-color: ${psBackground};
`

If you combine this with the initial setup, theming will be instantly avialable in your CSS-in-JS styles!

Normalized data

If you need some raw normalized data, we also have you covered in our normalize.json file.

{
  "groupItems": ["default", "action", "danger", "info", "success", "warning"],
  "groups": {
    "action": {
      "psActionBackground": {
        "id": "psActionBackground",
        "cssName": "--ps-action-background",
        "sassName": "$ps-action-background",
        "jsName": "psActionBackground",
        "value": "#4A33D1"
      }
    },
    ...
  }
}

To use, import it into your project via a bundler that supports JSON:

import tokenData from '@pluralsight/design-tokens/meta/normalize.json'

Mobile

We offer both android and iOS solutions for mobile platforms. All mobile tokens can be found in our Github repo mobile tokens location.

Android

For Android, we ship the tokens as Compose colors.

iOS / Swift

We support iOS platforms via an Asset Catalog.