Use font-weight 500 for interactive controls

[kra-mo]

Interactive controls paired with icons should use weight 500 instead of bold (700) or regular (400) to roughly visually match our icons' weight. This is of course font-dependent, but 500 seems to work pretty well generally. Example on Safari:

Currently, I think this only concerns:

• NcButton
• The main label of NcFormBox* components

[ShGKme]

Interactive controls paired with icons should use weight 500 instead of bold (700)

Only with icons? Without icons - still 700?

[ShGKme]

Is it only about buttons or anything interactive button-like?

What about:

• NcActions buttons
• List items
• CheckboxRadioSwitch
• Radio Group
• Tabs

[kra-mo]

Only with icons? Without icons - still 700?

Right, no, sorry :)

With and without icons. Just so the weights match in general.

What about:

NcActions buttons yes, I think they already follow the same styling as regular buttons?

List items no, in general the styling there is usually regular weight in other design systems as well and I think people already use weight to communicate certain things so it's not worth it. Maybe in the future.

CheckboxRadioSwitch yes, I didn't think about but it makes sense. It helps communicate that the label is clickable as well :)

Radio Group yes, that too, similar to CheckboxRadioSwitch and button styles.

Tabs I did think about but we use bold to communicate selection there currently. If we dropped that behavior, then yes, otherwise no. But it might be nice to drop it anyway since it shifts the layout around which isn't nice. I didn't include it in the mockup over at #7520 either. So sure I suppose :)

[ShGKme]

NcActions buttons yes, I think they already follow the same styling as regular buttons?

No, they are 400 (normal).

CheckboxRadioSwitch yes, I didn't think about but it makes sense. It helps communicate that the label is clickable as well :)

Currently them (probably) meant to look like a general text

The main label of NcFormBox* components

By the way, the floating label of input-like fields is also 500 at the moment.

[ShGKme]

Headings in, e.g., form groups: 700

[ShGKme]

I'd like to create variables in the theming for all the font-weight use cases.

Something like:

/* Default text font weight */
--font-weight-default: normal;
/* Interactive buttons-like elements font-weight */
--font-weight-element: 500;

But with a clear understanding what set of labels have the same weight, if possible.

[kra-mo]

No, they are 400 (normal).

Ah, you mean menu items. Not completely sure about those, but honestly I think 500 could work and it would make sense. If we want to follow the rule of interactive → medium, then I guess we should.

Currently them (probably) meant to look like a general text

Yeah, but I don't see why that has to remain the case

By the way, the floating label of input-like fields is also 500 at the moment.

Odd, do you know why?

Headings in, e.g., form groups: 700

700 makes sense for headings still, they are for layout.

But with a clear understanding what set of labels have the same weight, if possible.

Yeah, I guess it would be:

• Non-interactive elements and secondary text: 400
• Primary label of interactive elements: 500
• Headings: 700