@highlight-ui/tokens

Provides set of design tokens in multiple formats. The source files use the Tokens Studio for Figma JSON format.

Features

Tokens are exposed in the following formats:

• CSS variables
• SASS variables
• TS types and objects
• JSON - deprecated and will be deleted soon. Use TS types instead.

Installation

Using npm:

npm install --save-dev @highlight-ui/tokens

Using yarn:

yarn add -D @highlight-ui/tokens

Using pnpm:

pnpm add --D @highlight-ui/tokens

Usage

CSS variables

Tokens are exported as a set of CSS variables. To use it, import this file:

@import '~@highlight-ui/tokens/dist/tokens.css';

Once imported, define your styles by using one of the tokens:

.my-class {
  background-color: var(--background-success-hover);
}

SASS variables

Tokens are exported as a set of SASS variables. To use it, import this file:

@use '~@highlight-ui/tokens/dist/tokens';

Once imported, define your styles by using one of the tokens:

.my-class {
  background-color: tokens.$background-success-hover;
}

TypeScript

Tokens are exported as a set of TS types and objects.

Color tokens

import { ColorTokenType, colorTokens } from '@highlight-ui/tokens';

Where ColorTokenType is a union of token names and colorTokens is object where keys are token names and values are token values.

import React from 'react';
import { ColorTokenType, colorTokens } from '@highlight-ui/tokens';

export default function Example() {
  const tokenName: ColorTokenType = 'token-name';
  const tokenValue = colorTokens[tokenName];
  return <div style={{ 'css-attribute-name': tokenValue }} />;
}

IconColor tokens

import { IconColorTokenType, iconColorTokens } from '@highlight-ui/tokens';

Where IconColorTokenType is a union of token names and iconColorTokens is object where keys are token names and values are token values.

import React from 'react';
import { IconColorTokenType, iconColorTokens } from '@highlight-ui/tokens';

export default function Example() {
  const tokenName: IconColorTokenType = 'token-name';
  const tokenValue = iconColorTokens[tokenName];
  return <div style={{ 'css-attribute-name': tokenValue }} />;
}

Spacing tokens

import { SpacingTokenType, spacingTokens } from '@highlight-ui/tokens';

Where SpacingTokenType is a union of token names and spacingTokens is object where keys are token names and values are token values.

import React from 'react';
import { SpacingTokenType, spacingTokens } from '@highlight-ui/tokens';

export default function Example() {
  const tokenName: SpacingTokenType = 'token-name';
  const tokenValue = spacingTokens[tokenName];
  return <div style={{ 'css-attribute-name': tokenValue }} />;
}

Border width tokens

import { BorderWidthTokenType, borderWidthTokens } from '@highlight-ui/tokens';

Where BorderWidthTokenType is a union of token names and borderWidthTokens is object where keys are token names and values are token values.

import React from 'react';
import { BorderWidthTokenType, borderWidthTokens } from '@highlight-ui/tokens';

export default function Example() {
  const tokenName: BorderWidthTokenType = 'token-name';
  const tokenValue = borderWidthTokens[tokenName];
  return <div style={{ 'css-attribute-name': tokenValue }} />;
}

Typography tokens

Provides multiple groups of token useful for Typography such as color, font-family, font-size, font-weight, line-height, letter-spacing, text-case and text-decoration.

import {
  TypographyColorTokenType,
  typographyColorTokens,
  FontFamilyTokenType,
  fontFamilyTokens,
  FontSizeTokenType,
  fontSizeTokens,
  FontWeightTokenType,
  fontWeightTokens,
  LetterSpacingTokenType,
  letterSpacingTokens,
  LineHeightTokenType,
  lineHeightTokens,
  TextCaseTokenType,
  textCaseTokens,
  TextDecorationTokenType,
  textDecorationTokens,
} from '@highlight-ui/tokens';

Each group contains one type export and one object. Similar to other token prior to this section.

import React from 'react';
import {
  TypographyColorTokenType,
  typographyColorTokens,
} from '@highlight-ui/tokens';

export default function Example() {
  const tokenName: TypographyColorTokenType = 'token-name';
  const tokenValue = typographyColorTokens[tokenName];
  return <div style={{ 'css-attribute-name': tokenValue }} />;
}

Contributing 🖌️

Please visit personio.design.

If you're interested in contributing, please visit our contribution page.