@optimizely/design-tokens
Advanced tools
Re-usable design tokens to be used within Optimizely themes.
npm install @optimizely/design-tokens
yarn add @optimizely/design-tokens
For usage, see examples:
Tokens can be accessed from the package using the following url pattern:
@optimizely/design-tokens/dist/<format>/<token-package>
Currently supported formats:
Token packages currently available:
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";
}
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")
}
}
}
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.
npm install sass-loader sass --save-devwebpack.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/
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";
See: https://webpack.js.org/loaders/less-loader/
npm install --save-dev gulp-lessgulpfile.js for .less files, or change an existing task.task("build-less", () => {
return src(["**/*.less"]).pipe(
less({
paths: [path.join(__dirname, "node_modules")],
})
);
});
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.
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/
FAQs
Re-usable design tokens to be used within Optimizely themes.
We found that @optimizely/design-tokens demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.