https://github.com/kaelig/google-spreadsheets-theo-demo

Design tokens, managed via Google Spreadsheets, generated using Theo
https://github.com/kaelig/google-spreadsheets-theo-demo

design-systems design-tokens google-spreadsheets theo

Last synced: about 1 month ago
JSON representation

Design tokens, managed via Google Spreadsheets, generated using Theo

• Host: GitHub
• URL: https://github.com/kaelig/google-spreadsheets-theo-demo
• Owner: kaelig
• License: mit
• Created: 2019-06-16T00:28:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T13:50:36.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T22:19:31.743Z (7 months ago)
• Topics: design-systems, design-tokens, google-spreadsheets, theo
• Language: JavaScript
• Size: 198 KB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Design tokens (demo project)

- Managed with Google Spreadsheets ([see source](https://docs.google.com/spreadsheets/d/1O0QOUUq8N-NfHmlGWa61TN6oOSdQMBaDq0lp6DsCReQ/edit#gid=0))

- Generated by [Theo](https://github.com/salesforce-ux/theo), using [`google-spreadsheets-theo`](https://www.npmjs.com/package/google-spreadsheets-theo)

- Published to npm as [`design-tokens-test`](https://www.npmjs.com/package/design-tokens-test)

## Quick start

1. [Create a new repository from `google-spreadsheets-theo-demo`](https://github.com/kaelig/google-spreadsheets-theo-demo/generate) (or click the “Use this template” button on GitHub)

2. Clone the repository and install the dependencies:

   ```

   git clone https://github.com//google-spreadsheets-theo-demo.git

   cd google-spreadsheets-theo-demo

   yarn

   ```

3. Edit tokens in the spreadsheet

4. Run `yarn build-tokens`

This should appear:

```

yarn build-tokens

yarn run v1.12.3

$ yarn clean

$ rimraf tokens

$ node ./build-tokens.js

✔ Design tokens written to ./tokens/colors.scss

✔ Design tokens written to ./tokens/colors.common.js

✔ Design tokens written to ./tokens/colors.android.xml

✔ Design tokens written to ./tokens/colors.ios.json

✔ Design tokens written to ./tokens/spacing.scss

✔ Design tokens written to ./tokens/spacing.common.js

✔ Design tokens written to ./tokens/spacing.android.xml

✔ Design tokens written to ./tokens/spacing.ios.json

✨  Done in 2.29s.

```

The design tokens in `./tokens/` should be updated.