1.4.1 • Published 12 months ago

@gojek/asphalt-web-tokens v1.4.1

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
12 months ago

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

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

Generating themes

  1. Open theme-generation.js script inside the scripts folder.
  2. 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" }

  3. Change the themeName parameter to a relevant name.

    For example: asphalt-web-aloha

  4. Run the script using node scripts/theme-generation.js

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

12 months ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.1

1 year ago

1.2.0

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.2

3 years ago

1.0.3

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago