Styling labels for form controls

[grahamford]

With version 4 of Clarity, we have customised the way form labels are displayed using these variables:

  --clr-forms-label-font-weight: normal;
  --clr-forms-checkbox-background-color: var(--blue);
  --clr-forms-focused-color: var(--orange);
  --clr-forms-label-color: var(--blue);

In version 5, I found this to set the focus colour but couldn't find anything for the other attributes.

--cds-alias-status-info: var(--orange);

Is it possible to set the other css attributes on a version 5 form control label?

[mathisscott]

Here are different ways to do all those things in the Clarity Core (web component) forms. There's usually an easy way to get to these custom properties. It may take a little digging to get to the right ones. But once you find the ones you need, they are super easy to override.

[grahamford]

That's a good example Scott. However changing the font weight by updating this rule has no effect.

.my-custom-form label {
  font-weight: normal
}

It can't override the styling that comes from this:

:host([action="primary"]) ::slotted([slot="label"]) {
    font-weight: bold !important;
}

Is there a way to target the formatting on the nested slotted content?

[mathisscott]

Where is that styling coming from? I can't find it in our code base…

It looks like a label element being slotted into a button?

[grahamford]

I believe the styling is coming from /clarity/packages/core/src/forms/control-label/control-label.element.scss

[grahamford]

I've come back to this after a while working on other things and it looks as though the bold font weight is still forced by the rule

:host([action='primary']) ::slotted([slot='label']) {
  font-weight: bold !important;
}

Can you give some insight as to when an action is set to primary?