FormLabel - fix font color and height

[thrbnhrtmnn]

Description / User Story

When comparing the component in Figma and in Storybook, it seems like the color and the sizing are not perfectly aligned. The color of the font in the light default variant in Figma is hsla(216, 10%, 10% 1), but in Storybook it is hsla(220, 10%, 10% 1). The height of the container in light & dark default SM is 17px in Figma but 16px in Storybook and for light & dark default LG it is 25px in Figma and 24 in Storybook. In the error variant the height is aligned in Figma and in Storybook for all sizes, variants and themes.

---

Acceptance Criteria

• Font color for all light default FormLabels is aligned in Figma and Storybook
• Height for all sizes in light and dark theme as well as default and error variant is aligned in Figma and Storybook
• In case props were changed: Props Excel has been updated / comments have been resolved and props changed from red to black font color > @thrbnhrtmnn or @angelicahoyss can support here

---

Background information

• Should we also check the behaviour for very long labels? Currently this seems to be handled differently in Figma and SB.
• Might already be solved with FormLabel - rename tokens #545

[thrbnhrtmnn]

Height issue was an error in design and was fixed, now height is aligned for all size variants.

[thrbnhrtmnn]

Hey @davidken91 , Hey @larserbach , I checked on the Form Label today and I saw that the colors are already correct. The only things missing are:

• In design there is no 8px bottom padding, this should probably be removed in code
• In design in dark mode MD default, the color of the label seems to be wrong (should probably be #FFFFFF, like in all other cases and in code).

[larserbach]

This is fixed:

In design in dark mode MD default, the color of the label seems to be wrong (should probably be #FFFFFF, like in all other cases and in code).

[davidken91]

Hi @larserbach and @thrbnhrtmnn , I removed the padding from the label but I can't seem to figure out why the font in the light version doesn't match Figma. I can see that we are using the correct tokens. Is it possible that we're using old values?

[thrbnhrtmnn]

Hey @davidken91 , as I wrote yesterday, the color is already correct on develop and matches figma :-)

[thrbnhrtmnn]

Conversation in Slack about this issue:

@thrbnhrtmnn :
Hey,
I noticed that with merging FormLabel - fix font color and height all components that use the Form Label now are missing the spacing between component and Label.
So I guess we have to add the spacing again, but not to the Label, but rather to the components that use the label.
Should I create a new issue for that or should we fix this in the current ticket?

@davidken91 :
I think we can keep the same issue. I'll create a new branch because the old one was merged. So we're going to add the spacing for each component that uses it? If this is the case then it would probably have the same effect as before because it would still reference the same token. Do we need to have separate tokens for the user to granularly decide when to add the padding?

@larserbach :

So we're going to add the spacing for each component that uses it?

TLDR: Yes
For now it's fine if we apply Forms//LabelSlot/Padding on all these components.
Soonish, I will create component tokens where we currently apply SEM-tokens directly. But nothing to worry about now.
Does this answer your queestions?