[enhancement] Click color swatch to copy hex code to clipboard?
Brian-Pob opened this issue · comments
I would first like to say that I absolutely love Open-Props and I think it's such a simple yet effective way to have consistently good styling across my projects.
That being said, I often find myself wanting to just steal a color or two for something really small like submitting a component on UIverse.io (where I can't import external stylesheets) or even using a color for a Google Slides presentation.
I think it would be useful to be able to easily grab a hex code from the color swatches in the colors section of the site. Though I do realize that it could be confusing and defeat the purpose of having the props available as a library.
Here's a simulation of my idea:
If you think this would be a useful addition to the site I would be happy to submit a PR implementing this feature. Thanks!
Nice, I could see this being a good workflow yeah. Easy to copy and paste colors from the docsite.
A PR with the feature sounds nice 🙂
what do you think about offering to put either the custom property name or the hex into the clipboard? like when folks click, they get a popup about which they want to copy? another tricky thing too, is should it copy hex or offer hsl, rgb, etc?
Cool feature but it may creep up on you with scope 😅
I was thinking we could have a little options menu with checkboxes for the user’s preferences located above the colors section. I’m gonna explore and test out some other ways to do this but here is a rough idea that I came up with on my ipad.
But yeah, I get what you mean about scope creep! 😅
Here's a little TODO list for my feature
- Update color swatch CSS for buttons
- Click to copy property
- Click to copy Hex
- Click to copy RGB
- Click to copy HSL
- Option for which format to copy
- Tooltip or some other indicator that something was copied to clipboard
- Consider adding "Skip buttons" for tab navigation?
- Style format selection
- Improve wording of format selection
- Consider turning "Copy type" selector into a toggle switch?
Decided to host the WIP fork on Vercel
https://open-props-fork.vercel.app/
features comin along nice!
@argyleink The feature is basically done on my fork now! Though I would like suggestions on how to improve the styling and wording on the format selector.
@argyleink The feature is basically done on my fork now! Though I would like suggestions on how to improve the styling and wording on the format selector.
been on vacation, back now and in the saddle! this is lookin sweet tho, folks are gonna love it.
i took a stab at adding some styles to make it look more in line with the rest of the design. Might be fine for now?
With all the colors becoming buttons and in the tab flow, it's probably a good idea to add some roving focus with something like this? https://github.com/argyleink/roving-ux
that way folks on a keyboard don't need to tab through every single one, they can tab over groups and use arrow keys and spacebar.
for the gray text in the radio label, use var(--text-2) instead of a gray so it's adaptive with the light/dark theme 👍🏻
been on vacation, back now and in the saddle! this is lookin sweet tho, folks are gonna love it.
Welcome back from vacation. And thank you for the kind words!
i took a stab at adding some styles to make it look more in line with the rest of the design. Might be fine for now?
for the gray text in the radio label, use var(--text-2) instead of a gray so it's adaptive with the light/dark theme 👍🏻
Thanks. I'll get to work on this.
With all the colors becoming buttons and in the tab flow, it's probably a good idea to add some roving focus with something like this? argyleink/roving-ux
that way folks on a keyboard don't need to tab through every single one, they can tab over groups and use arrow keys and spacebar.
The tab order was one of my concerns when I started building out this feature and I'm not surprised that there's already an existing tool that helps solve this issue. Built by you nonetheless! 😁
So for this feature, is it alright if I add the roving-ux package to the docsite project? Or would you prefer to keep it vanilla?
I've gone ahead and added roving-ux. Implementation is looking good!
Screencast.from.2024-02-21.23-20-59.webm
TODO's based on code review in #476 (review):
- Clean up (console logs, comments, formatting)
- Look into color libraries for the color conversions
- Look into oklch() and p3 implementations
- Look into implementing copy format options using
<fieldset>
TODO's based on code review in #476 (review):
- Clean up (console logs, comments, formatting)
let's just stick at this and make issues/feature requests for anything additional!? they're nice to haves, but the core here is much nicer to have and doesnt need to wait for the other stuff. thoughts?
Sounds good to me! 👍