npm package: @highlight-ui/tokens
Description: Set of design tokens for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 4.3.9

[![npm](https://img.shields.io/npm/v/@highlight-ui/tokens)](https://www.npmjs.com/package/@highlight-ui/tokens)

# @highlight-ui/tokens

Provides set of design tokens in multiple formats.
The source files use the [Tokens Studio for Figma](https://docs.tokens.studio/) 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:

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

Using yarn:

```bash
yarn add -D @highlight-ui/tokens
```

Using pnpm:

```bash
pnpm add --D @highlight-ui/tokens
```

## Usage

### CSS variables

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

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

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

```css
.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:

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

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

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

### TypeScript

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

#### Color tokens

```ts
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.

```tsx
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

```ts
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.

```tsx
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

```ts
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.

```tsx
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

```ts
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.

```tsx
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.

```ts
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.

```tsx
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](https://www.personio.design/40d648a47/v/0/p/31ff8e-select/b/26fe12).

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).