Packages

Tools#

In addition to a CLI, Tempera offers other tools to improve design tokens adoption.

stylelint-tokens#

A Stylelint plugin that helps avoid the adoption of unofficial design specifications.

Installation#

yarn add @tempera/stylelint-tokens

Usage#

Install Stylelint and update your configuration file to utilize the plugin.

// stylelint.config.js
const tokens = require("./fixtures/example-tokens");
module.exports = {
// ...
plugins: ["@tempera/stylelint-tokens"],
rules: {
"@tempera/official-specs": tokens,
},
};
Tokens#

The plugin expects these tokens to be in the javascript/es6 format which you can generate using Style Dictionary except exported as CommonJS modules.

In other words, flat CommonJS modules in PascalCase are expected.

Example:

module.exports.ColorBackgroundBase = "#ffffff";
module.exports.ColorBackgroundAlt = "#fcfcfcfc";

Support for tokens in ES6 format is on the roadmap.

View the source

Supporting Packages#

The underlying packages that support Tempera are publicly accessible.

You are welcome and encouraged to use these packages directly should you need a custom solution.

🚀 Contributing to these packages is also welcome.

css-types#

Utilities to categorize your CSS.

Installation#

yarn add @tempera/css-types

Usage#

const {
// Example: matchers.SPACING
// Contains a list of regex matchers to help match common types in CSS
matchers,
// example: getMatcher(postcssProperty)
// Returns a regex matcher fitting for the provided property
getMatcher,
// Example: types.SPACING
// Contains a list of common types in CSS
types,
// Example: getType(postcssProperty)
// Returns a common type fitting for the provided property
getType,
} = require("@tempera/css-types");

View the source

postcss-scorecard#

A PostCSS plugin that exposes hooks into design token adoption validation.

Installation#

yarn add @tempera/postcss-scorecard

Usage#

const pxToRem = require("postcss-pxtorem");
const expandShorthand = require("postcss-shorthand-expand");
await postcss()
.use(pxToRem())
.use(expandShorthand)
.use(
scorecard({
onInvalid: (score) => {
// do something when CSS property is not an official spec
},
onValid: (score) => {
// do something when CSS property is an official spec
},
onFinished: () => {
// do something after validation finishes
},
specs, // the official design tokens
})
)
.process(css, { from: undefined });
Specs#

The plugin expects these specs/tokens to be in the javascript/es6 format which you can generate using Style Dictionary except exported as CommonJS modules.

In other words, flat CommonJS modules in PascalCase are expected.

Example:

module.exports.ColorBackgroundBase = "#ffffff";
module.exports.ColorBackgroundAlt = "#fcfcfcfc";

Support for tokens in ES6 format is on the roadmap.

View the source

tailwind-config#

An API that generates a Tailwind configuration from a set of design tokens.

Installation#

yarn add @tempera/tailwind-config

Usage#

import getTailwindConfig from "@tempera/tailwind-config";
const tailwindConfig = getTailwindConfig(tokens);
// do something with the tailwind config
Tokens#

The plugin expects these specs/tokens to be in the javascript/es6 format which you can generate using Style Dictionary.

In other words, flat modules in PascalCase are expected.

Example:

export const ColorPrimary = blue;
export const ColorSecondary = yellow;

View the source

twind#

An API that generates a Twind instance from a set of design tokens.

Installation#

yarn add @tempera/twind

Usage#

import getTwind from "@tempera/twind";
const { tw } = getTwind(tokens);
function Demo() {
return (
<div className={tw`text-primary`}>
);
}
Tokens#

The plugin expects these specs/tokens to be in the javascript/es6 format which you can generate using Style Dictionary.

In other words, flat modules in PascalCase are expected.

Example:

export const ColorPrimary = blue;
export const ColorSecondary = yellow;

View the source

stitches#

An API that generates twind/style shapes from a set of design tokens.

Demo#

View On CodeSandbox

Installation#

yarn add @tempera/stitches

Usage#

import getStitches from '@tempera/stitches';
import getTwind from '@tempera/twind';
import { style } from 'twind/style';
import tokens from './tokens';
const stitches = getStitches(tokens);
const { tw } = getTwind(tokens);
function Demo() {
const button = style(stitches.button);
return (
<div>
<button className={tw(button())}>Base Button</button>
<button className={tw(button({ variant: 'secondary' }))}>
Secondary Button
</button>
</div>
);
}
Tokens#

The plugin expects these specs/tokens to be in the javascript/es6 format which you can generate using Style Dictionary.

In other words, flat modules in PascalCase are expected.

The tokens should follow the following format:

// base format
export const Component[COMPONENT]Base[LONGHAND_CSS_PROPERTY];
// size format
export const Component[COMPONENT][SIZE][LONGHAND_CSS_PROPERTY];
// variant format
export const Component[COMPONENT][VARIANT][UI_STATE][LONGHAND_CSS_PROPERTY];

Examples:

export const ComponentButtonBaseFontSize = '1rem';
export const ComponentButtonBaseColor = 'red';
export const ComponentButtonSmallFontSize = '0.75rem';
export const ComponentButtonSecondaryDefaultBackgroundColor = 'red';
export const ComponentButtonSecondaryDefaultColor = 'white';
export const ComponentButtonSecondaryDefaultFontSize = '0.875rem';
export const ComponentButtonSecondaryHoverFontSize = '0.75rem';
export const ColorPrimary = 'red';
export const ColorWhite = 'white';
export const FontSizeTiny = '0.75rem';
export const FontSizeSmall = '0.875rem';
export const FontSizeMedium = '1rem';
export const LineHeightTiny = '1rem';
export const LineHeightSmall = '1.25rem';
export const LineHeightMedium = '1.5rem';

View the source