feat: add support for transitions token

[atanasster]

issue: #1079

added support for transitions in theme sclaes

[fcisio]

Hey @atanasster
This enhancement made me realize that your babel plugin could solve future similar needs.

🤔 I wonder if that's a pattern that we want to allow or not.

Tested it and it currently works! One could simply create a new scale, named anything they want, and then reference it in the variant.

space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
speed: ["0.35s", "0.5s", "0.75s"],
ease: {
  in: "ease-in",
  out: "ease-out",
  inOut: "ease-in-out",
},
colors: {
  text: "#000",
  background: "#fff",
},

This is how I personally manage transitions in the theme.

By setting the values on CSS variables, you can better control the output. Plus this means that the transition property doesn't need to be in the variant. It could very well be in straight Emotion or in the SX prop.

a: {
  "--speed": "speed.1",
  "--ease": "ease.out",

  color: "primary",
  transition: "color var(--speed, 0.35s) var(--ease, ease)"
},

[atanasster]

@fcisio - oh thats very nice. Are you able to already use the plugin for your app, or just testing it out? I know the colors cs custom vars still need the fix, but the rest should be ok.

[fcisio]

@atanasster I'm just testing out right now.
And yep! My plan is to use everything, then start using the colors once they're fixed!

[hasparus]

Atanas ♥