Axiom Design Tokens Library

Re-usable design tokens to be used within Optimizely themes.

Installation

npm install @optimizely/design-tokens

yarn add @optimizely/design-tokens

For usage, see examples:

SASS
LESS
CSS variables
Javascript

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/

Current Tags

0.1.1-devel.4 ... devel (3 years ago)
0.1.0 ... latest (4 years ago)