{"id":18264843,"url":"https://github.com/bem/themekit","last_synced_at":"2025-08-24T22:36:18.780Z","repository":{"id":37552772,"uuid":"257626593","full_name":"bem/themekit","owner":"bem","description":"Build system of design-tokens for any platforms","archived":false,"fork":false,"pushed_at":"2022-12-11T11:58:33.000Z","size":1054,"stargazers_count":74,"open_issues_count":30,"forks_count":11,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-29T05:02:03.746Z","etag":null,"topics":["build-system","design-system","design-tokens","design-tool","style-dictionary","style-tokens"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-21T14:44:44.000Z","updated_at":"2025-01-20T08:06:31.000Z","dependencies_parsed_at":"2023-01-26T22:46:20.613Z","dependency_job_id":null,"html_url":"https://github.com/bem/themekit","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fthemekit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fthemekit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fthemekit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fthemekit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bem","download_url":"https://codeload.github.com/bem/themekit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247252033,"owners_count":20908613,"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":["build-system","design-system","design-tokens","design-tool","style-dictionary","style-tokens"],"created_at":"2024-11-05T11:16:17.124Z","updated_at":"2025-04-04T21:30:52.272Z","avatar_url":"https://github.com/bem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![themekit](https://user-images.githubusercontent.com/7934638/83977761-b6831600-a90b-11ea-84a4-8c4dd3b60cc1.png)](https://github.com/bem/themekit)\n\n[![npm](https://img.shields.io/npm/v/@yandex/themekit.svg?style=flat-square\u0026labelColor=111)][npm] [![examples](https://img.shields.io/badge/examples-folder-007ecc?style=flat-square\u0026labelColor=111)][examples] [![node](https://img.shields.io/badge/node-8+-007ecc?style=flat-square\u0026labelColor=111)][node]\n\nThemkit is a build system for design-tokens for any platform. This system is based on [style-dictionary](sd-github) API and [redefinition levels](#-platforms), which allows you to describe platform-specific values. Themkit provides you to extend existing themes in order to supplement or redefine existing tokens, it also allows you to use the basic theme set and add it to the service.\n\n## Features\n\n- 🔍 Clear format (json or yaml) for developers and designers.\n- 📚 Define tokens once and get result for any format, for example js, css or json.\n- 🛠 Every part of the theme or some of the tokens is extendable and overridable.\n- 💻 Tokens may be defined for several web platforms, for example desktop and touch.\n\n## Installation\n\n```sh\n# via npm\nnpm i -DE @yandex/themekit\n# or yarn\nyarn add --dev @yandex/themekit\n```\n\n## Usage\n\nA themekit is available as a CLI tool.\n\n### `build`\n\n```sh\nBuilds themes for configured formats.\n\nUSAGE\n  $ themekit build\n\nOPTIONS\n  -c, --config=config  [default: themekit.config.{js,json,yml}] The path to a themekit config file.\n  -e, --entry=entry    Builds selected entries.\n  -o, --output=output  Builds selected outputs.\n  -w, --watch          Auto rebuilds themes after change sources.\n```\n\n## Get started\n\nMore usage cases you can see in [examples][examples].\n\n### Tool configuration\n\nFirst, you need to create a config file `themekit.config.json` at project root:\n\n```json\n{\n  \"entry\": {\n    \"light\": \"./src/theme/light.theme.json\"\n  },\n  \"output\": {\n    \"css\": {\n      \"transforms\": [\"name/cti/kebab\"],\n      \"buildPath\": \"./src/theme/themes\",\n      \"files\": [\n        {\n          \"destination\": \"[entry]/[platform]/root.css\",\n          \"format\": \"css/variables\"\n        }\n      ]\n    }\n  }\n}\n```\n\nA output section based on style-dictionary [platforms](https://amzn.github.io/style-dictionary/#/config?id=configjson) config.\n\n#### themekit config interface\n\n```ts\n{\n  /**\n   * Map with themes\n   */\n  entry: Record\u003cstring, string\u003e\n  /**\n   * Map with output formats\n   *\n   * @see https://amzn.github.io/style-dictionary/#/config?id=configjson\n   */\n  output: Record\u003cstring, {\n    /**\n     * List of transforms should be applied for each token\n     *\n     * @see https://amzn.github.io/style-dictionary/#/transforms\n     */\n    transforms: string[]\n    /**\n     * A preset that contains the transforms set\n     *\n     * @see https://amzn.github.io/style-dictionary/#/transform_groups\n     */\n    transformGroup?: string\n    /**\n     * Output directory for building results\n     */\n    buildPath: string\n    /**\n     * @see https://amzn.github.io/style-dictionary/#/actions\n     */\n    actions: string[]\n    /**\n     * List of files to get at the output\n     */\n    files: Array\u003c{\n      /**\n       * Output filepath, also supports helper placeholders:\n       * [entry] — theme name\n       * [platform] — platform name\n       */\n      destination: string\n      /**\n       * Output format\n       *\n       * @see https://amzn.github.io/style-dictionary/#/formats\n       */\n      format: string\n      /**\n       * Filter applied for each tokens\n       */\n      filter: any\n    }\u003e\n  }\u003e\n}\n```\n\n### Theme configuration\n\nThe basic theme configuration consists of the sources section, which lists which tokens should include to this theme (you can specify the full path or glob).\n\n```json\n{\n  \"sources\": [\n    \"./src/theme/tokens/typography.tokens.yml\",\n    \"./src/theme/tokens/color-light.tokens.yml\",\n    \"./src/components/**/*.tokens.yml\"\n  ]\n}\n```\n\n#### theme config interface\n\n```ts\n{\n  /**\n   * Extendable theme\n   */\n  extends?: string\n  /**\n   * Platforms that should be included in the theme (default common)\n   */\n  platforms?: Array\u003c'common' | 'deskpad' | 'desktop' | 'touch' | 'touch-pad' | 'touch-phone'\u003e\n  /**\n   * Mappers list\n   */\n  mappers?: string[]\n  /**\n   * Sources list\n   */\n  sources: string[]\n}\n```\n\n### Tokens\n\nTokens can include additional properties such as comment or group for documentation or meta information for processing, also can be used as aliases, see more at style-dictionary [properties](https://amzn.github.io/style-dictionary/#/properties).\n\nA themekit support write tokens in `json` or `yaml` format:\n\n#### yaml\n\n```yml\ncomponent:\n  type:\n    base:\n      fillColor:\n        value: '#000'\n      typoColor:\n        value: '#fff'\n    danger:\n      fillColor:\n        value: '#f00'\n      typoColor:\n        value: '#fff'\n```\n\n#### json\n\n```json\n{\n  \"component\": {\n    \"type\": {\n      \"base\": {\n        \"fillColor\": {\n          \"value\": \"#000\"\n        },\n        \"typoColor\": {\n          \"value\": \"#fff\"\n        }\n      },\n      \"danger\": {\n        \"fillColor\": {\n          \"value\": \"#f00\"\n        },\n        \"typoColor\": {\n          \"value\": \"#fff\"\n        }\n      }\n    }\n  }\n}\n```\n\n#### token interface\n\n```ts\n{\n  /**\n   * Token value\n   */\n  value: string\n  /**\n   * Token group\n   */\n  group?: string\n  /**\n   * Token comment\n   */\n  comment?: string\n}\n```\n\n## Additional features\n\n### 💻 Platforms\n\nA themekit supports platforms allows you to collect tokens for a specific platform such as `desktop` or `touch`, by default tokens included only from `common` platform.\n\nEach platform contains a several levels:\n\n| platforms   | levels                               |\n| :---------- | :----------------------------------- |\n| common      | common                               |\n| deskpad     | common + deskpad                     |\n| desktop     | common + deskpad + desktop           |\n| touch       | common + touch                       |\n| touch-pad   | common + deskpad + touch + touch-pad |\n| touch-phone | common + touch + touch-phone         |\n\n#### theme config\n\nPlatform should be written in file name after `@` symbol (exclude `common` level).\n\n```json\n{\n  \"platforms\": [\"desktop\", \"touch\"],\n  \"sources\": [\n    \"./tokens/project.tokens.yml\",\n    \"./tokens/project@desktop.tokens.yml\",\n    \"./tokens/project@touch.tokens.yml\"\n  ]\n}\n```\n\n### 🌈 Color processing\n\nA themekit supports [modifying colors](https://github.com/ianstormtaylor/css-color-function) for token values. Available next modifiers:\n\n- `h` — change hue\n- `s` — change saturation\n- `l` — change lightness\n- `a` — change alpha channel\n\n#### tool config\n\nNeed define `process-color` for output actions:\n\n```json\n{\n  \"output\": {\n    \"css\": {\n      \"actions\": [\"process-color\"]\n    }\n  }\n}\n```\n\n#### tokens\n\nJust use a necessary modifier for your color:\n\n```yml\ncomponent:\n  type:\n    base:\n      fillColor:\n        value: 'color(#000 a(80%))'\n```\n\n#### result\n\nAt result you get plain value with color:\n\n```css\n:root {\n  --component-type-base-fill-color: rgba(0, 0, 0, 0.8);\n}\n```\n\n## Formats\n\n### 🗂 css/variables\n\n#### tool config\n\n```json\n{\n  \"output\": {\n    \"css\": {\n      \"transforms\": [\"name/cti/kebab\"],\n      \"buildPath\": \"./src/theme/themes\",\n      \"files\": [\n        {\n          \"destination\": \"[entry]/[platform]/root.css\",\n          \"format\": \"css/variables\",\n          \"options\": {\n            // default: \":root\"\n            \"selector\": \".MyTheme\",\n            // default: false\n            \"useAliasVariables\": true\n          }\n        }\n      ]\n    }\n  }\n}\n```\n\n## License\n\n[MPL-2.0][license]\n\n[node]: https://nodejs.org/en/\n[npm]: https://www.npmjs.com/package/@yandex/themekit\n[license]: https://github.com/bem/themekit/blob/master/LICENSE.md\n[examples]: https://github.com/bem/themekit/tree/master/examples\n[sd-github]: https://github.com/amzn/style-dictionary\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fthemekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbem%2Fthemekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fthemekit/lists"}