# Design Tokens

Tokens folder contains all design tokens used to build out our applications.

## Token Value

Tokens values are stored as TypeScript files for its typing & linting capability.

Those values serve as **Single Source of Truth** for our design system.

### Global Tokens

Those are global values that's shared across themes. E.g.

```typescript
// ./global
export const size = {
  breakpoint: {
    sm: {
      value: 36, // Size in rem
    },
  },
};

export const color = {
  shade: {
    0: '#ffffff',
  },
};
```

### Theme Tokens

Those are specific values that's specific to only the theme. E.g.

```typescript
// ./theme/lendi
export const primary = {
  500: {
    value: '#00c0a5',
  },
};

export const color = {
  interaction: {
    main: {
      value: '#00c0a5',
    },
  },
};
```

Note: Lots of those theme-specific values are being imported from `@lendi-ui/commons`. To be consolidated in the future.

## Building Tokens

Then, using [Style Dictionary](https://amzn.github.io/style-dictionary/), token values are [transformed](https://amzn.github.io/style-dictionary/#/transforms) and built into each platform's preferred [formats](https://amzn.github.io/style-dictionary/#/formats).

E.g.

The above will be transformed to the following, for Theme component.

`./theme/lendi/token.json`

```json
{
  "size": {
    "breakpoint": {
      "sm": {
        "value": "36rem"
      }
    }
  },
  "color": {
    "shade": {
      "0": "#ffffff"
    },
    "primary": {
      "500": "#00c0a5"
    },
    "interaction": {
      "main": {
        "value": "#00c0a5"
      }
    }
  }
}
```

`./theme/lendi/token.css`

```css
:root {
  --size-breakpoint-sm: 36rem;
  --color-shade-0: #ffffff;
  --color-primary-500: #00c0a5;
  --color-interaction-main: var(--color-primary-500);
}
```

The above will be transformed to the following, for Storybook public consumption.

```
https://lendi.style/tokens/latest/lendi.css
https://lendi.style/tokens/latest/lendi.json
```