Implement some functionality to translate any kind of value to the correct export format

[apresmoi]

As pointed out in #8, every format that we currently allow to export have different limitations and ways to represent the data.

For example, the DTCG format only allows "duration" kind of tokens to be expressed as miliseconds (ms), on the other hand CSS or SASS also allows you to use seconds/miliseconds.

So, for this specific case, duration in the app should allow seconds/miliseconds.

But when you export to DTCG should look something like:

"Duration": {
  "$type": "duration",
  "slow": {
    "$value": "3000ms"
  },
  "fast": {
    "$value": "500ms"
  }
}

We have some other differences. For exampe for the cubicBezier token type in the DTCG format. While in CSS/SCSS we can export easing functions as linear | cubic-bezier | steps-function the DTCG format only allows you to use cubic-bezier.

In the case we have something like the following:

We should export these tokens with the correct type for each:

"Easing": {
  "easeStep": {
    "$type": "string",
    "$value": "steps(10, end)"
  },
  "easeLinear": {
    "$type": "string",
    "$value": "linear"
  },
  "easeInSine": {
    "$type": "cubicBezier",
    "$value": [0.12, 0, 0.39, 0]
  }
}

The type for the token should be obtained from the actual value of the token in the UI, and then properly translated every format.

Let's say that we have several tokens in a group and all those tokens share the same token type, we should set the type in the group and not directly in the token, like so:

"Easing": {
  "$type": "cubicBezier",
  "easeInSine": {
    "$value": [0.12, 0, 0.39, 0]
  },
  "easeOutSine": {
    "$value": [0.61, 1, 0.88, 1]
  }
}

[mhechavarria]

Can I give this a try?

[apresmoi]

Of course @mhechavarria ! I'll assign it to you.