feat: color theory based theme generator #1925
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey @ak4zh , I'd be curious to know how the different color theories would work with the base design tokens (primary, secondary, tertiary, etc) and hence how they get consumed into the components themselves. For instance monochromatic is already kind of implicit in the shades of each color token, but clearly would need to be consumed differently in the components or force end devs to override defaults of secondary and tertiary uses to use the shades from Primary to achieve a monochromatic theory. Also, I know it's a draft, but the v2 branch is disappearing in less than a week, when it gets merged to dev+master. I think it might be best to raise an actual discussion first because there are a lot of implications and approaches to this that need to be fleshed out before actual code implementation. For that discussion it would be great to see something like example palettes of each theory, what tokens they would map to, how they would be consumed/reflected by components. Then we can look at whether it would have any effect on color checking, theme data formats etc. Cheers, |
|
@niktek I will go ahead and create a discussion, thanks for pointing that out. Also I understand the v2 branch will vanish in a few days, I wouldn’t mind opening a new pull request with dev as the base branch. I just created this draft pull request to have a live version so we can play around with it for discussion. I am not very good with colours selections and the current random generator does not generate any usable set of colours as it’s truly random. I was just playing around with these settings and it seemed to generator some sensible colour combinations compared to truly random ones which can be used right away or can be further customised. So wanted to have something up for others to play around. |
|
Discussion should go here please. We have a LOT of changes planned and this will need to come as a focused update rather than piecemeal: |
|
@niktek To answer the other part about design token, I was thinking of ways to specify a near colour for each design token color. For example we can mention that the error color should be near red color but should one that syncs well with the selected color theory generated colors. I am still thinking of how to achieve that but just shared because this does generates something better than random, and others who actually made this theme generator can help me with their inputs. |
|
Yep I'm seeing some situations where the randomisation appears better on the palette on screen case, but don't really flow through to how they would show up when consumed by the components themselves and then of course there are just some examples where they are all competing for darkness! 
I've added your PR to the list already going in the issue @endigo9740 linked above so we can weigh all the changes together. |
|
@niktek Yes I see Monochromatic, Neutral and Pastel does not generate good options as it follows a light to dark variation, which we already have in design system. |
|
The issue with this PR is that it's working being completed in a place that this feature will no longer be maintained soon. Essentially whatever is happening between now and the v2 release next week, and then we'll hit a feature freeze until the standalone version is created. Given that, we have this PR as reference, but will not be moving forward with it. |
Linked Issue
Closes: None currently
Description
This pull request introduces a new feature that allows users to generate theme colors based on various color theories. The feature adds a dropdown selector that lets users choose a color theory, and then generates a color palette following that theory.
Changes
Purpose
The purpose of this pull request is to discuss the proposed feature and gather feedback from the community. Users will be able to experiment with different color theories and generate theme colors that match their preferences and needs.
Next Steps
This is a draft pull request, and I'm looking forward to receiving feedback on the feature implementation and user experience. Once the feedback is collected and addressed, we can move forward with refining the feature and ensuring it aligns well with the goals of the project.
Please feel free to share your thoughts and suggestions on this proposed feature. Your feedback is highly appreciated!
This PR is a work-in-progress and is being submitted as a draft for discussion and feedback.
Changsets
Instructions: Changesets automate our changelog. If you modify files in
/packages/skeleton, runpnpm changesetin the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should beminorwhile chores and bugfixes should bepatch. Please prefix the changeset message withfeat:,bugfix:orchore:.Checklist
Please read and apply all contribution requirements.
devbranch (NEVERmaster)docs/,feat/,chore/,bugfix/pnpm checkpnpm formatpnpm test