If you set in theme styles > links to have some form of text decoration, Bricks uses the css text-decoration shorthand property automatically setting the following:
text-decoration-thickness - set to auto
text-decoration-color - set to currentcolor
text-decoration-style - set to solid
You shouldn’t be setting these as defaults without giving us the option to set them in Links settings. The only way to then set these is via custom css and the use of !important which could later lead to specificity issues.
Yes, we use the shorthand property for text-decoration, because it is very rare - if at all - that someone wants to change these values individually. If so, custom CSS is the way to go for this use case instead of inflating the typography settings.
In addition, these are the intial, i.e. default values - we do not change them. Accordingly, you do not need !important to overwrite them.
a {
text-decoration-thickness: 10px;
text-decoration-color: green;
}
Sorry, but I do have to use !important as shown in the screenshot below. At the top are the settings from Theme settings > Links. Below that are the settings I have made in global css to override the line thickness and also add a text-underline-offset. The line thickness from global css is being overridden by the default one you set
Sorry, but I disagree that these would rarely be changed. Even so, they are css properties for links and so you should make them available in the editor for people to change.
Hey Simon,
In your case, the styles are apparently “optimized” and put together in one file so that the order is decisive, if the specificity is the same (which it is sincethe selector are the same - including :where):
The default styles are loaded in line 570, and your styles in line 72, so they are overwritten. Instead of using !important, you could remove the:where()'s to make your selectors more specific—just without the !important sledgehammer.
