Comments (11)
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 π
from open-props.
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! π
from open-props.
Decided to host the WIP fork on Vercel
https://open-props-fork.vercel.app/
from open-props.
features comin along nice!
from open-props.
@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?
![Screenshot 2024-02-20 at 3 32 17β―PM](https://private-user-images.githubusercontent.com/1134620/306445397-6648baf9-d2ee-4e77-9a07-d6140083cb30.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY0MTM1OTQsIm5iZiI6MTcxNjQxMzI5NCwicGF0aCI6Ii8xMTM0NjIwLzMwNjQ0NTM5Ny02NjQ4YmFmOS1kMmVlLTRlNzctOWEwNy1kNjE0MDA4M2NiMzAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDUyMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA1MjJUMjEyODE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzRiMDFjYTc2NDFmM2M5YjI2MjliMzJhOWUwZGY1ZmM2NGI4ZjhmYTI3NjExNTk5NmI2MzE3ZDk4MmM1ZmZkMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.iRxkCkEjWO9qUFH4152Y1vCyzbNgsJuqvTt-nOjg3nE)
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 ππ»
from open-props.
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
from open-props.
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?
from open-props.
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?
from open-props.
@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.
from open-props.
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>
from open-props.
Sounds good to me! π
from open-props.
Related Issues (20)
- `clip-path` border shapes
- Need rotate and scale animation additions
- Add constructible stylesheet as an output format HOT 3
- Animations Shake-Y on Safari not stacking with other animations HOT 1
- Add dialog animation styles to normalize
- Add social media brand colors pack HOT 6
- Consider offering a few turbulence props to the svg pack
- Add SDR/HDR neon color props HOT 1
- Add scalable font size import HOT 2
- Sizes Counters Wrong HOT 8
- normalize table hover colors HOT 7
- Add Spacing Props HOT 2
- width: fit-content for tables is hard to override or customize HOT 3
- Media query conflict at "only" breakpoints HOT 1
- beta grays in v1.* aren't on :host in the shadow export
- `<a>` negative margin in normalize HOT 1
- Ensure Shadows Do Not Switch to Dark When Normalize Is Not Used
- Request: Dark mode as opt-in HOT 2
- Normalize toggle white/dark mode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-props.