juxtopposed / realtimecolors

Real-time UI Colorpicking Tool. See your favorite colors of choice for a website in real time.
https://realtimecolors.com
Other
828 stars 30 forks source link

Exporting primary-text-contrast, secondary-text-contrast, and accent-text-contrast #64

Closed drpicox closed 10 months ago

drpicox commented 1 year ago

Is your feature request related to a problem? Please describe. Not a problem, just an inconvenience. When exporting colors, we have --primary, --secondary, ... but not the corresponding black or white that should go inside of it. Because I like to copy-and-paste several variations, so I can see how those colors play, I found myself that I have to add one more step that is updating --primary-text-contrast --secondary-text-contrast and --accent-text-contrast manually.

Describe the solution you'd like Would be it possible to add those variables to the export panel?

Describe alternatives you've considered Now I am doing it by hand, but I have considered to open a PR... but it appears that the main repository has been moved.

Additional context Great work! Great channel!

juxtopposed commented 1 year ago

You can export these foregrounds in the custom code export section as:

More info here

So let's say if you need them in just CSS, the custom code input would be something like:

--text: ${text};
--background: ${bg};
--primary: ${primary};
--primary-foreground: ${primaryFg};
--secondary: ${secondary};
--secondary-foreground: ${secondaryFg};
--accent: ${accent};
--accent-foreground: ${accentFg};