-
-
Notifications
You must be signed in to change notification settings - Fork 71
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 to Color Themes #176
feat: add support to Color Themes #176
Conversation
pinging @mikaelvesavuori |
Hey @opauloh! Sorry for dropping the ball on this, tons at work right now + new projects coming up. I am generally happy about this, but the issue—and how I have addressed the need for this from others—is that it should suffice to handle this as a simple "meta object" as needed, by you as the user. Have you verified that component generation works correctly with this? (Manually ideally, since I don't necessarily trust we have tests for that) |
No worries @mikaelvesavuori! That's totally understandable; thanks for letting me know
Yes - Component generation doesn't support multi-themes, but it also doesn't break, let's suppose you have a component with a color that only exists on the colors -> theme frame. In this scenario, when attempting to sync with Figma using The component will still be created, just without a token assigned to it the color, since it currently only looks for the Colors frame and not for nested frames. I think this is an acceptable behavior, but I would be happy to add support to components generation on a separate issue / PR. Because there are some nuances, for example, it would need to ensure the same color token exists across all themes, and it would be needed to extend the components to accept a theme prop as well. for example
And then CSS would be able to refer to the theme like this. background-color: ${colors[theme]['danger']}; |
Hi again @opauloh! I am happy to merge this if you add a note/warning that the behavior of generated components will be as you told me above in this thread. Consider if you have bandwidth to look at solving the issue/problem in a later PR and I will look at that as well. |
Notes updated! I'll open an issue soon on how to proceed with the generation of the components. |
pinging @mikaelvesavuori |
Kudos, SonarCloud Quality Gate passed! 0 Bugs No Coverage information |
Hey @opauloh, this is released in |
Hey all
At my team, we have apps that users can switch between Light and Dark Theme, and having the ability to control that type of token on Figma is something we have been really looking for, and this PR introduces a feature that adds support to that!
How it works: on Figma, you can create extra frames under the Color Themes at the same level as the other colors, and under these Frames, you can have color elements that will then get stored in specific object collections under the color token.
Screenshots
Example of how it would like in Figma:
Example of how it would like in code:
Which in a practical example you could use as follows:
Description of the changes made
Checklist