style-tokens

A design token module for Hub backed by style-dictionary.

Available Hub style tokens

Installation

npm install @iqmetrix/style-tokens

Exports

Style tokens exports 2 different files for each type: tokens.{ext} and tokens-accessibility.{ext}. The latter uses a new color schema for better contrast, improving accessibility. The following examples work for both exports, and you will only need to change the filename.

Examples

Javascript / TypeScript

Use the exported constants in your components.

index.ts

import * as tokens from "@iqmetrix/style-tokens";

export const Component = () => <div style={{ backgroundColor: tokens.ColorBaseBlueBase }} />;

Use it with accessibility.

index.tsx

import * as tokens from "@iqmetrix/style-tokens/dist/js/tokens-accessibility";

export const Component = () => <div style={{ backgroundColor: tokens.ColorBaseBlueBase }} />;

CSS Variables

See MDN's documentation on CSS variables

Include the CSS file in your project.

index.tsx

import "@iqmetrix/style-tokens/dist/css/tokens.css";

// or import "@iqmetrix/style-tokens/dist/css/tokens-accessibility.css";

export const Component = () => <div className="example" />;

Use the variables within CSS files.

index.css

.example {

background-color: var(--color-base-blue-base);

}

SCSS

index.scss

@import '~@iqmetrix/style-tokens/dist/scss/tokens';

// or import '~@iqmetrix/style-tokens/dist/scss/tokens-accessibility';

.example {

background-color: $color-base-blue-base;

}

index.tsx

export const Component = () => <div className="example" />;

Less

index.less

@import "~@iqmetrix/style-tokens/dist/less/tokens.less";

//or @import "~@iqmetrix/style-tokens/dist/less/tokens-accessibility.less

.example {

background-color: @color-base-blue-base;

}

index.tsx

export const Component = () => <div className="example" />;

RQ Mobile (JSON)

rqmobile/tokens.json or rqmobile/tokens-accessibility.json

Sources

• github
• registry