{"id":17089979,"url":"https://github.com/kaelig/google-spreadsheets-theo","last_synced_at":"2025-04-12T22:14:33.802Z","repository":{"id":34932310,"uuid":"192140309","full_name":"kaelig/google-spreadsheets-theo","owner":"kaelig","description":"Import Google Spreadsheets to a format digestable by Theo","archived":false,"fork":false,"pushed_at":"2025-01-08T05:20:19.000Z","size":960,"stargazers_count":12,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T06:03:30.213Z","etag":null,"topics":["design-systems","design-tokens","theo"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaelig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-16T01:59:42.000Z","updated_at":"2023-03-27T19:23:12.000Z","dependencies_parsed_at":"2023-01-15T10:45:12.984Z","dependency_job_id":null,"html_url":"https://github.com/kaelig/google-spreadsheets-theo","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaelig%2Fgoogle-spreadsheets-theo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaelig%2Fgoogle-spreadsheets-theo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaelig%2Fgoogle-spreadsheets-theo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaelig%2Fgoogle-spreadsheets-theo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaelig","download_url":"https://codeload.github.com/kaelig/google-spreadsheets-theo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637790,"owners_count":21137538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","design-tokens","theo"],"created_at":"2024-10-14T13:51:03.381Z","updated_at":"2025-04-12T22:14:33.775Z","avatar_url":"https://github.com/kaelig.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# google-spreadsheets-theo\n\nImport [design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) from a Google Spreadsheet to a format digestable by [Theo](https://github.com/salesforce-ux/theo).\n\n## Quick start\n\nThis example shows how to manage color tokens using Google Spreadsheets and Theo.\n\nThe end result is available in the [`./example`](https://github.com/kaelig/google-spreadsheets-theo/tree/master/example) directory.\n\nA ready-to-use demo project (more detailed and published to npm), is available at \u003chttps://github.com/kaelig/google-spreadsheets-theo-demo\u003e.\n\n### 1. Create a Google Spreadsheet to store the design tokens\n\nPaste this table in a new Google spreadsheet, and populate it with the project or company’s design tokens:\n\n| name            | value   | type  | category         | comment                                   |\n| --------------- | ------- | ----- | ---------------- | ----------------------------------------- |\n| color-primary   | red     | color | background-color | Primary color for use on all main actions |\n| color-secondary | #ff00ff | color | background-color |                                           |\n| color-tertiary  | green   | color | background-color |                                           |\n\nIt should look something like this [example Google Spreadsheet](https://docs.google.com/spreadsheets/d/1O0QOUUq8N-NfHmlGWa61TN6oOSdQMBaDq0lp6DsCReQ/edit#gid=0).\n\n### 2. Publish the spreadsheet to the web\n\n`google-spreadsheets-theo` is only able to access the contents of the spreadsheet if it’s publicly published to the web.\n\n1. In the **File** menu, select **Publish to the web…**\n2. Click the **Publish** button (leave the default options)\n\n### 3. Install Theo and `google-spreadsheets-theo`\n\nUsing [yarn](https://yarnpkg.com/):\n\n```\nyarn add theo google-spreadsheets-theo --dev\n```\n\nOr, using npm:\n\n```\nnpm install theo google-spreadsheets-theo --save-dev\n```\n\n### 4. Set up Theo and google-spreadsheets-theo\n\nIn a file called `build-tokens.js`, paste:\n\n```js\nconst fs = require('fs');\nconst path = require('path');\nconst theo = require('theo');\nconst googleSpreadsheetsTheo = require('google-spreadsheets-theo');\n\nconst config = {\n  // URL of the spreadsheet\n  // REPLACE WITH YOUR OWN\n  spreadsheetUrl: 'https://docs.google.com/spreadsheets/d/xxx/edit#gid=0',\n\n  // Each worksheet is for a different type of tokens (colors, spacing, typography…)\n  worksheets: [\n    {\n      id: 1, // position of the worksheet (or \"tab\") in Google Spreadsheets\n      name: 'colors',\n    },\n    // Example for adding spacing tokens:\n    // {\n    //   id: 2,\n    //   name: 'spacing',\n    // },\n  ],\n\n  // Output formats (see https://github.com/salesforce-ux/theo#formats)\n  formats: [\n    {\n      transform: 'web',\n      format: 'scss',\n    },\n    // Add formats below.\n    // {\n    //   transform: 'ios',\n    //   format: 'ios.json',\n    // },\n  ],\n\n  // Where the output files should be stored\n  outputDirectory: './tokens/',\n};\n\nconst convert = (name, transform, format, data) =\u003e\n  theo\n    .convert({\n      transform: {\n        type: transform,\n        file: `${name}.json`,\n        data,\n      },\n      format: {\n        type: format,\n      },\n    })\n    .then((contents) =\u003e contents)\n    .catch((error) =\u003e console.log(`Something went wrong: ${error}`));\n\nconst main = async (config) =\u003e {\n  for ({id, name} of config.worksheets) {\n    const data = await googleSpreadsheetsTheo(config.spreadsheetUrl, id);\n\n    for ({transform, format} of config.formats) {\n      const tokens = await convert(name, transform, format, data);\n      const filename = `${config.outputDirectory}${name}.${format}`;\n      await fs.promises\n        .mkdir(path.dirname(filename), {recursive: true})\n        .then(() =\u003e {\n          fs.writeFileSync(filename, tokens);\n        });\n      console.log(`✔ Design tokens written to ${filename}`);\n    }\n  }\n};\n\nmain(config);\n```\n\n⚠ Don’t forget to change the value of `spreadsheetUrl` in the `config` object.\n\n### 5. Run the script\n\nAdd the script to the project’s `package.json`:\n\n```json5\n  // package.json\n  \"scripts\": {\n    // copy-paste this line:\n    \"build-tokens\": \"node ./build-tokens.js\",\n  },\n```\n\nIn a terminal, run:\n\n```\nyarn build-tokens\n```\n\nOr, using npm:\n\n```\nnpm run build-tokens\n```\n\nThis should appear:\n\n```\nyarn build-tokens\nyarn run v1.12.3\n$ node ./build-tokens.js\n✔ Design tokens written to ./tokens/colors.scss\n✔ Design tokens written to ./tokens/colors.common.js\n✔ Design tokens written to ./tokens/colors.android.xml\n✔ Design tokens written to ./tokens/colors.ios.json\n✨  Done in 2.29s.\n```\n\nVoilà! Tokens should now be available in the `./tokens` directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaelig%2Fgoogle-spreadsheets-theo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaelig%2Fgoogle-spreadsheets-theo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaelig%2Fgoogle-spreadsheets-theo/lists"}