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
merged 1 commit into from Nov 20, 2020

Conversation

atanasster
Copy link
Collaborator

issue: #1079

added support for transitions in theme sclaes

@fcisio
Copy link
Collaborator

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

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

@fcisio
Copy link
Collaborator

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
Member

@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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants