@pantheon-systems/pds-design-tokens NPM | npm.io

1.0.0-dev.120 • Published 4 days ago

Install

Weekly downloads

-

License

GPL-3.0-or-later

Repository

Last release

4 days ago

pds-design-tokens

Design Tokens for the Pantheon Design System

The repository uses Style Dictionary as its foundational framework.

Compiled tokens can be found in the build directory.

Output Types

PDS Design Tokens are provided in the following formats:

CSS Custom Properties
JSON
Figma (formatted to sync to Figma styles)

Technology Agnostic

Design tokens are specifically intended for the purpose of design and will be translated into various technical formats as needed.

By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.

For example, CSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the defaultUnit key for any token object.

Public and Private Tokens

All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS stylesheets.

We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.

Color Modes

Each color or elevation token is designated as light-mode or dark-mode. All non-color tokens are considered to be global tokens.

Pantheon Design System Design Tokens

@infinitebrahmanuniverse/nolb-_pant @everything-registry/sub-chunk-703

4 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

6 months ago

7 months ago

7 months ago

7 months ago

10 months ago

11 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago