@optimizely/design-tokens v0.1.0
Re-usable design tokens to be used within Optimizely themes.
Links
Installation
npm install @optimizely/design-tokens
yarn add @optimizely/design-tokens
For usage, see examples:
Tokens
Tokens can be accessed from the package using the following url pattern:
@optimizely/design-tokens/dist/<format>/<token-package>
Currently supported formats:
- sass
- less
- css
- js
- json
Token packages currently available:
- colors (all)
- typography (all)
- typography-map (scss, less)
Fonts
Axiom design system uses Inter. The font can be found locally in the fonts folder:
@optimizely/design-tokens/dist/fonts/fonts.css
To include it with webpack, add the following rule:
{
test: /\.(woff|woff2)$/,
use: {
loader: "file-loader",
options: {
context: path.resolve(__dirname, "../node_modules/@optimizely/design-tokens/dist/fonts")
}
}
}
When using Inter for numbers, it's recommended to make them monospaced. Inter supports this by setting the font feature setting to tnum
:
{
...
font-feature-settings: "tnum";
}
Brand Assets
Some brand assets are included in the design tokens package in order to simplify distribution. These can be found in the @optimizely/design-tokens/dist/brand-assets
folder.
To enable svg and png import with webpack, add the following rule:
{
test: /\.(svg|png)$/,
use: {
loader: "file-loader",
options: {
context: path.resolve(__dirname, "../node_modules/@optimizely/design-tokens/dist/brand-assets")
}
}
}
Examples
SASS
To use color tokens via sass:
@use "@optimizely/design-tokens/dist/scss/colors" as axiom-colors;
$your-primary-color: axiom-colors.$brand-primary-color;
We strongly recommend using the new module system whenever it's possible to avoid style conflicts and unexpected behavior.
To include the fonts via sass:
@import "@optimizely/design-tokens/dist/fonts/fonts.css";
Make sure it's included in a root file so it's available everywhere.
SASS with webpack
- Install sass-loader, sass.
npm install sass-loader sass --save-dev
- Add a new rule to
webpack.config.js
for .scss files
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
For more information see: https://webpack.js.org/loaders/sass-loader/
LESS
To use color tokens via less:
@import "@optimizely/design-tokens/dist/less/colors";
@your-primary-color: @axiom-brand-primary-color;
To include the font via less:
@import (css) "@optimizely/design-tokens/dist/fonts/fonts";
LESS with webpack
See: https://webpack.js.org/loaders/less-loader/
LESS with gulp
- Install gulp-less.
npm install --save-dev gulp-less
- Add a new task to
gulpfile.js
for .less files, or change an existing task.
task("build-less", () => {
return src(["**/*.less"]).pipe(
less({
paths: [path.join(__dirname, "node_modules")],
})
);
});
CSS
To use color tokens via css variables in a stylesheet:
@import "node_modules/@optimizely/design-tokens/dist/css/colors.css";
:root {
--your-primary-color: var(--axiom-brand-primary-color);
}
/* Or use directly */
.some-class {
background-color: var(--axiom-brand-primary-color);
}
To include the font:
@import "node_modules/@optimizely/design-tokens/dist/fonts/fonts.css";
In html:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="node_modules/@optimizely/design-tokens/dist/fonts/fonts.css">
<link rel="stylesheet" href="node_modules/@optimizely/design-tokens/dist/css/colors.css">
</head>
<style>
:root {
--your-primary-color: var(--axiom-brand-primary-color);
}
/* Or use directly */
.some-class {
background-color: var(--axiom-brand-primary-color);
}
</style>
...
...
</html>
Make sure the axiom design token css file is included last so any other css variable can be correctly overriden.
Javascript
To use color tokens via ES6 JavaScript or inside a React component:
import * as axiomColors from '@optimizely/design-tokens/dist/js/colors';
const primaryStyle = {
backgroundColor: axiomColors.brandPrimaryColor
};
const StyledButton = <button style={primaryStyle}>Press me</button>
The javascript provided in the module is by default ES6. If older javascript support is needed, we recommend transpiling the module using webpack or similar tool. Example using webpack can be found here: https://webpack.js.org/loaders/babel-loader/