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

Add a way to add inline text background color #20835

Closed
Tracked by #33447
iamtakashi opened this issue Mar 12, 2020 · 6 comments · Fixed by #34680
Closed
Tracked by #33447

Add a way to add inline text background color #20835

iamtakashi opened this issue Mar 12, 2020 · 6 comments · Fixed by #34680
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.

Comments

@iamtakashi
Copy link

It'd be nice to be able to add an inline text background color to any text. I've seen it's being called "highlight", but I'm not sure the proper name :)

Example:
Pattern 37

The text can be multi-lined, and a little detail that makes this nicer is to have side paddings so that the background doesn't get cut off immediately at where the text begins/ends. An old CSS Tricks that talks about this.

Previously: #16014

@mtias mtias added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement. labels Mar 12, 2020
@paaljoachim
Copy link
Contributor

Associated with
"Bring colors by the block for some blocks"
#20197

@mtias mtias added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Jul 18, 2021
@mtias mtias mentioned this issue Jul 19, 2021
65 tasks
@dingo-d
Copy link
Member

dingo-d commented Jul 31, 2021

It would also be cool to add the gradient to the highlighted text in the RichText component. Currently, only the color can be added, either via inline color: style on has-inline-color span element or by referencing the color name registered in the global colors.

Since the inline color already uses a span to format it, and in order to apply the gradient to the text we'd need to add it as a background with background-clip, this shouldn't be that hard to implement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

6 participants
@mtias @iamtakashi @ellatrix @paaljoachim @dingo-d and others