@pearson-ux/master-tokens

Master Tokens

This repo contains design tokens for Pearson’s Master design system used on Pearson, Pearson+, and Pearson English Language Learning sites. The tokens have been transformed into usable form in the following formats:

• CSS custom properties (variables)
• JavaScript ES6 consts
• JavaScript "flat" module

├── dist/ - Current release files
│
├── releases - Files from all releases
│   ├── v1.0.2/
│   ├── v1.0.3/
│   ├── v1.0.4/
│   ├── ...

Consuming

You do not need to run anything in this repo to consume the design tokens. Simply grab the desired token file from the dist/ or releases/ directory for use in your source code. Each token file contains the version number in a comment at the top of the file, as well as a token containing the version: in CSS it’s --master-tokens-version, in JavaScript it’s MasterTokensVersion.

CSS

CSS custom properties (variables) need to be loaded before they’re referenced in a style. The token CSS file should be one of the first loaded on a page or via an @import command. If the npm package is installed into your project, a reference to the Pearson.com version of the variables might look like this in HTML:

<link rel="stylesheet" type="text/css" href="node_modules/@pearson-ux/master-tokens/dist/p-com/css/pearson-master-tokens-variables.css">

or like this in CSS:

@import url('node_modules/@pearson-ux/master-tokens/dist/p-com/css/pearson-master-tokens-variables.css')

JavaScript

JS versions of the tokens can be loaded or imported just as other modules are.

Releases

v1.0.6

• Added --color--tint-accent-01-medium-03 to p.com (it's unused in ELL and P+)

v1.0.5

• P.com field focus color update for accessibility improvement

v1.0.4

• Rename consumable files to simply token.xxx
• Reorganize directory structure: dist/ contains current consumable files, releases/ contains all versions
• Remove development files from distribtuion

v1.0.3

• Add version number as a token to each generated file. In CSS it's --master-tokens-version; in JS it's MasterTokensVersion.

v1.0.2

• Add version numbers to all generated token files
• Rename token files to pearson-master-tokens...
• Delete earlier release versions to avoid token file name confusion

v1.0.1

• Documentation fixes

v1.0.0

• Initial release
• All color and gradient tokens normalized across all 3 systems!
• Add custom transform logic to build script (only graidents are used currently)
• Add post-processing logic for CSS tokens to build script
• Add release command to build script for easier releases
• Add .editorconfig for code consistency

Development

Refer to the README-DEV.md file in the repository for development instructions.