@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 -

• 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.