@gojek/asphalt-web-tokens
v1.5.0
Published
Handles Asphalt Web default theme and tokens generation
Downloads
699
Readme
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 thescripts
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.