Getting Started

Instalation

TIP

Bazaar library hosted at Bukalapak's NPM (opens new window), you need to connected to VPN Production to install the package.

yarn add @bukalapak/bazaar-token

How to use

Find all available tokens in the figma bazaar token (opens new window).

JavaScript

In JavaScript, design token names are formatted in lower camelCase (opens new window).

const tokens = require('@bukalapak/bazaar-token');
console.log(tokens.brand01); // #E31E52

In JSON, design token names are formatted in kebab-case (opens new window).

const tokens = require('@bukalapak/bazaar-token/dist/tokens.json');
console.log(tokens['brand-01']); // #E31E52

Note that, if your project supports ECMAScript Modules, you can also use the import syntax.

import * as tokens from '@bukalapak/bazaar-token';
// or
import { brand01 } from '@bukalapak/bazaar-token';

Sass

Sass variables and map keys are formatted in kebab-case (opens new window).

// Using variables
@import '~@bukalapak/bazaar-token/dist/tokens.scss';

a {
  color: $brand-01;
}

// Using the map of all tokens
@import '~@bukalapak/bazaar-token/dist/tokens.map.scss';

a {
  color: map-get($tokens-map, 'brand-01');
}