# tlm-token-farm

> Transforms figma design tokens to common config files serving different styling frameworks

Latest version **0.0.17** (published 2022-12-09) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tlm-token-farm
pnpm add tlm-token-farm
yarn add tlm-token-farm
bun add tlm-token-farm
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.17 |
| Published | 2022-12-09 |
| First published | 2022-12-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 294.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Martin Prinz |
| Maintainers | fuasmattn |

## Links

- npm: https://www.npmjs.com/package/tlm-token-farm
- Repository: https://github.com/MaibornWolff/tlm-components
- Homepage: https://github.com/MaibornWolff/tlm-components#readme
- Issues: https://github.com/MaibornWolff/tlm-components/issues
- npm.io page: https://npm.io/package/tlm-token-farm

## Dependencies (6)

- [ts-node](https://npm.io/package/ts-node.md) ^10.9.1
- [postcss-cli](https://npm.io/package/postcss-cli.md) ^9.1.0
- [tlm-stencil](https://npm.io/package/tlm-stencil.md) ^0.0.2
- [lodash.template](https://npm.io/package/lodash.template.md) ^4.5.0
- [style-dictionary](https://npm.io/package/style-dictionary.md) ^3.7.0
- [token-transformer](https://npm.io/package/token-transformer.md) ^0.0.22

## Recent versions

- 0.0.17 (latest) — 2022-12-09

## README

# The Liberation Machine - Token Farm

The Token Farm houses the exported tokens from the Figma design file and converts them into variables for our Stencil component library.

## Structure

**input** contains the raw json output files from the Figma design file. **src** cointains the script which turns these files into usable variables, which are generated in **dist**.

## Output types

The Token Farm can be configured to output various different file types, such as JavaScript, TypeScript, json, css and scss in `build.ts`. It can also create several output files for different themes. 

## Workflow

The [update-tokens.yml](https://github.com/MaibornWolff/tlm-components/blob/f1e251d73e552d90f0c734b5e58b180c5bd5f96d/.github/workflows/update-tokens.yml) workflow executes the Token Farm script whenever a commit is pushed to the `main` branch. Afterwards the Stencil component library is rebuilt with the new tokens and the Storybook is updated.

## Using the tokens in the Stencil Library

To use the exported tokens, add the following line to a component:

```TypeScript
import { tokenName } from '../../../token-farm/dist/js/global';
```

You can then reference the tokens using Emotion, a CSS-in-JS package.

```JavaScript
import { css } from '@emotion/css';

const componentStyle = css`
  css-attribute: ${tokenName};
`;

...

export class TlmComponent {
  render() {
    return (
      <div class={componentStyle}></div>
    );
  }
}
```

---
_Source: https://npm.io/package/tlm-token-farm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._