Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request to change colors defined with hsl/hsla to rgb/rgba #246

Open
sophisma opened this issue Feb 18, 2021 · 1 comment
Open

Request to change colors defined with hsl/hsla to rgb/rgba #246

sophisma opened this issue Feb 18, 2021 · 1 comment

Comments

@sophisma
Copy link

sophisma commented Feb 18, 2021

Hi, this is more a request than an issue.
One possible way to define color in CSS is by using hsl or hsla, for instance:

background-color: hsla(341, 100%, 30%, 0.1);

or

background-color: hsl(341, 100%, 30%);

Many email clients don't support this and don't show the colors.
If you're using a WYSIWYG editor like GKEditor 5 to compose newsletters you're out of luck.
It would be great if this could be replaced by the rgb/rgba equivalents, so

background-color: hsla(341, 100%, 30%, 0.1);

would become

background-color: rgba(153, 0, 48, 0.1);

Another interesting thing to add would be replacing CSS vars by they're actual values.
For instance, if you define a var like this:

:root {
        --ck-color-mention-background: rgba(153, 0, 48, 0.1);
    }

And then you reference it in another style like this:

.ck-content .mention {
            background-color: var(--ck-color-mention-background);
        }  

The var in the .ck-content .mention element should be replaced by the actual value before inlining the CSS.
This is for the same reason as the hsl/hsla issue, some email clients don't support vars and if you're using tools that generate css like this you're out of luck.
This is how it should look before the inlining process starts.

.ck-content .mention {
           background-color: rgba(153, 0, 48, 0.1);
       } 

Sorry to post this here, I know that I can replace that myself using regular expressions but i would be great if this was supported out of the box.

@martinnormark
Copy link
Contributor

Thanks for these suggestions, I can see how that would make life easier.

Any chance you want to contribute these in a pull request? If you don't know where to start, I'm happy to point out some directions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants