Incorrect display of string variables in dev mode

There are two situations,
the first is when the font weight is specified in variables as a string,
the second is when the font weight is specified as a value.
the value is specified as a kebab variable.
string falls into CSS as a normal property.

But when we assign a font family as a string
, css treats it as a kebab variable.

What is the reason? Bug or feature?)

Hey @Artyom_Cherepanov, thanks for reaching out!

I sent this over to the Dev mode team, and they confirmed that this is not a bug. It is by design.

There’s a limitation for variables on font weights. We couldn’t easily verify in codegen that a string type variable’s value is valid as a font-weight for every mode, so rather than risk the code output changing when the layer’s mode changes (which is unexpected and would erode trust in the code), we chose not to show it. If the design uses a numeric variable for the font weight instead, it should work.

Thanks for the reply. Why did I have such a question?

I use vribbles exclusively for the design system. I assign all variables from the component and do not bind ready-made variables to the component. And I was surprised that the assignment of a variable occurs through a string, while it is not displayed correctly in css.

I agree that this is not a bug, this case is rare, but I am sure that it will appear more often. It would be nice to give the option of choosing a non-urgent property in advance.