I'd like to highlight some explorations from in #18678 (comment) which I think are excellent. While separate issues, I'm glad to see what our intentions are very aligned. I'm going to close that issue in favor of this one. There has been some additional color picker exploratory work done in #18678, and kindly pointed out that we should merge our efforts. I wonder if it would be better for trying out a bunch of colors and gradients quickly, and delineating more clearly which colors the theme is born with, and which colors you manually type in. Here's a mockup that restores the swatches as the first interaction:Ĭlick "Custom", and you'd get the color picker you designed above. I wonder if we can flip this on its head, and bring the benefits of the new design to the custom color picker dialog, while keeping the benefit of being able to quickly pick a spot color (which may be even more important so as to pick from the color palette provided by a theme in the global style system!): In this picker, hex codes and custom colors are primary, and swatches are secondary (inside the dialog). Specifically, the new color picker prioritizes advanced control over picking between preset color and gradient swatches and seeing the impact. Two separate branches have been merged into it, and the experience is just about ready for the first merge (of course with a bunch of followups to happen after that): #19344Īs I worked on that branch in the past few days, I realized that although there is something incredibly elegant in the unified Figma-esque color-picker (which I brought up myself), it does also lose a little bit of simplicity in what we have now. You can also explore some custom implementations but it might be more work. In the Navigation block, when I try to use arrow keys to change the color, the popover closes. In addition, arrow key navigation isn't implemented so it might only confuse users. It isn't the best experience for those who use screen readers because they aren't grouped. As of today, those color buttons are implemented with buttons.
After effects system color picker code#
I really like it.įor the colors that come from the theme/site, we should change the internal HTML code used. The same applies to the sighted users, as you can control everything from one place, use one of the preselected options and customize further. The current implementation is very difficult to use when using the keyboard only so having only one space makes it all simpler. Nice, I like that it's consolidated into one popover. The underlying patterns can be iterated on should that be needed as styling comes in.Īt this point, I would love feedback as to if this feels good to explore and go further? I would also love to know what technical limits we have if any. This assumes some new visual language and is based heavily on the PR work in #19344 so please view that with it in mind. If you click custom, then you get to explore deeper. The actual color picker activates on clicking the color and by default shows the theme colors in my explorations: The start of the color interface in my latest mocks for #19255 show this pill brought in from explorations over the new interface.Ībove you can see a few states, with text and with an accordion.
It's worth saying these are just initial sketches and ideas over final mocks, let's have a discussion first before diving into that.
I have been observing some explorations in the block interface work that really can be brought back into the color picker throughout, so decided to explore just that. As things grow, it could be great to explore whether what we have today works or we can review. Another problem with our current implementation is browseability, it's harder than should be to see what is the default colour. This can really produce visual density if we have more than one. Our color picker takes up a lot of interface space right now. I thought it might be good to pull out that element and bring some ideas to the table to iterate. As part of the work that's been going on with both the new editor styling #18667 and also global styles #19255 #19611, the idea of iterating the color picker has come about.
0 kommentar(er)
