ModernXL Tokens

This repo contains design tokens for Pearson’s ModernXL design system used in Higher Ed applications. The tokens have been transformed into usable form in the following formats:

• CSS custom properties (variables)
• SCSS custom properties (variabled)
• JavaScript ES6 consts with px units for font sizes
• JavaScript ES6 consts with rem units for font sizes
• JavaScript "flat" module

├── dist/web - Current release files

## 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/web` directory for use in your source code. 

### 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 modernXl version of the variables might look like this in HTML:

`<link rel="stylesheet" type="text/css" href="node_modules/@pearson-ux/modernxl-tokens/dist/web/css/modernxl/variables.css">`

or like this in CSS:

`@import url('node_modules/@pearson-ux/modernxl-tokens/dist/web/css/modernxl/variables.css')`

### SCSS

SCSS custom properties (variables) need to be imported before the are referenced in a style. The tokens SCSS partial file should be one of the first ones loaded in to the compiler via the `@import` command. If the npm package is installed into your project, a reference to the modernXl version of the variables might look like this in your SCSS file:

`@import url('node_modules/@pearson-ux/modernxl-tokens/dist/web/css/modernxl/variables')`

### JavaScript

JS versions of the tokens can be loaded or imported just as other modules are. There are 2 JS version of tokens.
- tokens.es6.js - ES6 constants with pixels for font sizes. LIne sizes are as defined in figma.
- tokens.es6.rem.js - ES6 constants with rem units for font sizes. The line height is a ratio rather than a fixed value

## Development

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