@gojek/asphalt-web-tokens

Asphalt Web Tokens

Tokens are the building block of our design system and foundation of theming. Asphalt Web Tokens acts as a bridge between components and theming by abstracting the logic of fetching & processing tokens and theme creation. It works as per the theme specification.

This package exports

• legacy tokens as default export
• variables, theme & getTheme as named exports
  • variables: default tokens in form of CSS variables.
  • theme: default theme in compact format as per theme specification.
  • getTheme: function to get theme in any format for a set of tokens, it accepts tokens & format as parameters.

Theme has three formats -

1. default - theme object with all properties of tokens, also referred as expanded form.
2. compact - theme object with subset of token properties.
3. legacy - object with CSS custom properties and their values.

Usage

Npm

npm install @gojek/asphalt-web-tokens

import { theme } from “@gojek/asphalt-web-tokens”

Yarn

yarn add @gojek/asphalt-web-tokens

import { theme } from “@gojek/asphalt-web-tokens”

Maintainers

Extracting tokens

yarn run extract-tokens

to fetch tokens from source.

It requires two environment variables, create a .env file at project root and put variables there.

• SECRET_KEY - API key for source
• BIN_ID - source ID

BIN_ID points to the default source, override this when you want to use a different source.

We use JSONbin as source in our current implementation, as we use Figma Tokens, we are depending on JSONbin through it.

Contribution guidelines

1. Clone the repository.
2. Do the changes and make a PR against master branch.
3. Once its merged and pipeline has succeded
4. Run yarn run build
5. Run yarn run release
6. Run git push --follow-tags origin master to push the tags to origin.
7. Run npm adduser --registry https://registry.npmjs.org, make sure you have permission to @gojek project on public npm, reach out to @detj for access.
8. Run npm publish
9. Create release for the tag manually on gitlab.