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.