Update inline code padding and use border-radius variable - #447
Conversation
| background-color: #f7f7f7; | ||
| border: 1px solid var(--wp--preset--color--light-grey-1); | ||
| border-radius: 2px; | ||
| border-radius: var(--wp--custom--button--border--radius); |
There was a problem hiding this comment.
While this is the same value, semantically it's a different use, and I think we should add a new custom var
| border-radius: var(--wp--custom--button--border--radius); | |
| border-radius: var(--wp--custom--code--border--radius); |
There was a problem hiding this comment.
Are you suggesting adding style in the parent theme here? If so, do you think we should also include the complete styling for the code here, like the color of the code, padding, etc.? Perhaps we can ask the design team to provide a standard design for the code.
And what do you think we should call this? I reckon a callout is not a typical button or code?
"code": {
"border": {
"color": "var(--wp--preset--color--light-grey-1)",
"radius": "2px",
"style": "solid",
"width": "1px"
}
},
Or you're just referring to adding something like these two.
There was a problem hiding this comment.
"code": {
"border": {
"radius": "2px",
}
},Yep exactly that. I guess it makes sense to add it to parent, even if most child themes might not use it.
There was a problem hiding this comment.
And what do you think we should call this? I reckon a callout is not a typical button or code?
Callouts are definitely different, not sure what you're asking here sorry... can you expand on it?
There was a problem hiding this comment.
Ah, yeah. I'm referring to the button in the --wp--custom--button--border--radius.
Since this border radius belongs to a callout, I assume we also want it to be something like --wp--custom--callout--border--radius.
There was a problem hiding this comment.
Ah, yeah. I'm referring to the
buttonin the--wp--custom--button--border--radius. Since this border radius belongs to a callout, I assume we also want it to be something like--wp--custom--callout--border--radius.
Sorry I get it now. Yeah I don't think this change should be included, unless we're going to update the mu-plugins callout styles to also use a var.
Could you please give an example for testing? |
@ndiego icymi. |
| background-color: var(--wp--custom--wporg-callout--color--background); | ||
| border-width: 0; | ||
| border-radius: 2px; | ||
| border-radius: var(--wp--custom--button--border--radius); |
There was a problem hiding this comment.
I think we should revert this, as it's a value copied from mu-plugins, see comment.
| .wporg-developer-code-block { | ||
| $half_padding: calc(var(--wp--preset--spacing--10) / 2); | ||
| $border_radius: 2px; | ||
| $border_radius: var(--wp--custom--code--border--radius); |
There was a problem hiding this comment.
This isn't inline code, rather it's the container, so I don't think it should use this var. Reason being; if I were to change this variable to increase the inline code style, I don't think I'd expect these container styles to also change.
adamwoodnz
left a comment
adamwoodnz
left a comment
There was a problem hiding this comment.
Sorry this has gone back and forth, but I think we should reduce the scope of this. Variablizing all 2px values doesn't make sense to me without creating more granular vars.
3 participants
This is a minor tweak to inline code styles. Previously, the padding was hardcoded and did not adjust based on the size of the font. There are a few instances where inline code is used in headings.
This PR updates the left and right padding to
0.25em. This translates to a padding increase of1pxto4pxfor article copy.While adjusting the padding, I also updated all instances of
border-radius: 2pxto use the custom variable.