dunno if it's related (nor intentional), but we also noticed on wikifunctions (beta) that running the latest (?) codex has turned all radio buttons labels to bold automatically. the labels in the example used to be set to font weight regular.

The label text should be @font-weight-normal/400. The bolded label text bug in Radio and Checkbox was introduced by changes in the CSS Specificity [T351753]. I think when we fixed the binary input’s padding overrides, it broke the binary input’s label’s text (The label text is a deeper nested Less style so it may have been affected by the changes to selectors above it). The labels all look like this:

<label class="cdx-label__label" for="apple">
  <span class="cdx-label__label__text">Apple</span>
</label>

And to style the different labels, we use its "grandparent" selector or the component it lives within ie. Radio, Checkbox, Label. For example, the Checkbox label looks like this (notice the wrapper <div>):

<div class="cdx-label cdx-checkbox__label">
  <label class="cdx-label__label" for="apple">
    <span class="cdx-label__label__text">Apple</span>
</label><!----></div>

The bolded label text is coming from cdx-label__label__text selector in Label.vue. The bolded label text is meant for the top-level label in radio group, checkbox group, and form fields. We made changes in binary-input.less (ref) which I think caused these bolded styles to override the previous @font-weight-normal/400.

The breaking issue wasn't obvious for another CSS code, that we should revisit

	// Labels of nested fields within a fieldset should not be bolded.
	fieldset label&__label &__label__text {
		font-weight: @font-weight-normal;
	}

We should not rely on element specificity whenever possible.

In T355081#9462449, @lwatson wrote:

The label text should be @font-weight-normal/400. The bolded label text bug in Radio and Checkbox was introduced by changes in the CSS Specificity [T351753]. I think when we fixed the binary input’s padding overrides, it broke the binary input’s label’s text (The label text is a deeper nested Less style so it may have been affected by the changes to selectors above it). The labels all look like this:

<label class="cdx-label__label" for="apple">
  <span class="cdx-label__label__text">Apple</span>
</label>

And to style the different labels, we use its "grandparent" selector or the component it lives within ie. Radio, Checkbox, Label. For example, the Checkbox label looks like this (notice the wrapper <div>):

<div class="cdx-label cdx-checkbox__label">
  <label class="cdx-label__label" for="apple">
    <span class="cdx-label__label__text">Apple</span>
</label><!----></div>

The bolded label text is coming from cdx-label__label__text selector in Label.vue. The bolded label text is meant for the top-level label in radio group, checkbox group, and form fields. We made changes in binary-input.less (ref) which I think caused these bolded styles to override the previous @font-weight-normal/400.

Before the specificity patch we had

.cdx-radio .cdx-label__label__text {
    font-weight: 400;
}

overwriting the boldened label, now the selector in the output CSS is

.cdx-radio .cdx-radio__label.cdx-label__label__text {
    font-weight: 400
}

and doesn't catch the Radiogroup class markup anymore.

We could either amend the classes in Radiogroup markup, the selector in CSS or we turn the whole thing on the head and bolden more specific instead of overwriting the bolden again (the last one, without full code context sounds like the cleanest solution to me)

Change 991031 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] styles: Fix boldening of Labels

https://gerrit.wikimedia.org/r/991031

Change 991031 merged by jenkins-bot:

[design/codex@main] styles: Fix boldening of Labels

https://gerrit.wikimedia.org/r/991031

If we want to follow the design specifications, the Radio group demo should illustrate that the Radio label may contain links and may also include bold formatting in specific words or parts of the label. The bold formatting should not be applied to the entire Radio label, but certain portions of the text can be bold or contain links. This behavior applies to both Radio and Checkbox components.

Also, could we remove the "Radio group value: radio-2" from that demo? It's a bit confusing.

Change 992533 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533

Change 992533 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.2.1 to v1.3.0

https://gerrit.wikimedia.org/r/992533