Labels: Use different for Inputs and Checkboxes

[turolopezsanabria]

Absolutely related with this other discussion:
#1566

Already discussed in a Weekly meeting, and through slack as well.

What's the problem:

Right now, if you set font-weight: bold, it will be the same (bold) for all the fields: Inputs, Radio-buttons, Checkboxes, etc

What's the proposed idea?

It would be awesome to be able tu have different text styles for the labels when used in Inputs and Checkboxes, etc

We considered these 2 approaches

1. Iterate the label and checkbox fields to have their own font-weight
2. Use a different element (any node) for the checkbox-fields, instead of using the component label

We agreed on this one:

1. Iterate the label and checkbox fields to have their own font-weight

[turolopezsanabria]

I think the main idea is to be able to use a different font-weight in each field (molecule)

ie:

• input-field: label font-weight A
• checkbox-field: label font-weight B
• text-area-field: label font-weight C

If I'm not wrong, the idea is NOT to control the font-weight at development time using a Prop, but rather define a unique font-weight for each field (molecule) for that molecule to be the same font-weight every single time.

The specific need that triggered this request is for FC to use fw bold in checkboxes and radio-buttons, leaving the others fields in regular.

IMO, the initial request can be achieved defining a new component token (a default! SCSS variable, no need to use a Prop unless there's a good rationale behind.

[andresin87]

The final label weight decision is that all the field labels are token editable and labels for checkboxes and radios might we overwritten by theme to get the general theme wheight