Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for transitions token #1272

merged 1 commit into from Nov 20, 2020


Copy link

issue: #1079

added support for transitions in theme sclaes

Copy link

fcisio commented Nov 19, 2020

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)"

Copy link
Collaborator Author

@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.

Copy link

fcisio commented Nov 19, 2020

@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!

Copy link

@hasparus hasparus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Atanas ♥

@hasparus hasparus merged commit a70ffdd into system-ui:master Nov 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

4 participants