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 -

default - theme object with all properties of tokens, also referred as expanded form.
compact - theme object with subset of token properties.
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

Token Studio uses its sync feature to save the raw tokens into the token.json file within each theme.

Generating themes

Open theme-generation.js script inside the scripts folder.
Change the import statement import asphaltWebTokens from "../packages/asphalt-web-tokens/src/lib/token.json" assert { type: "json" }; to required theme's token.json.

For example: import asphaltWebTokens from ../packages/theme-asphalt-web-aloha/token.json { type: "json" }
Change the themeName parameter to a relevant name.

For example: asphalt-web-aloha
Run the script using node scripts/theme-generation.js

Contribution guidelines

Clone the repository.
Do the changes and make a PR against master branch.
Once its merged and pipeline has succeded
Run yarn run build
Run yarn run release
Run git push --follow-tags origin master to push the tags to origin.
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.
Run npm publish
Create release for the tag manually on gitlab.

Package detail

@gojek/asphalt-web-tokens

readme