I created a component with 3 variants: desktop, tablet, and mobile, each having different number variables for their respective widths: desktop-width (1440px), tablet-width (850px), and mobile-width (390px).
I assigned desktop-width to the desktop variant, tablet-width to the tablet variant, and mobile-width to the mobile variant.
However, when I switch from the desktop instance to the tablet instance, the width remains at 1440px instead of changing to 850px, which should correspond to the tablet-width.
I have checked the width, and it still reflects desktop-width (1440px) even though it should show tablet-width (850px). Is this a bug in the system, or am I doing something wrong?
I have a similar issue: I have 4 variants of a button in a component of different sizes, the size is regulated by internal padding, and they are different for each option.
When I changed the paddings from assigned values to numbered variables, different indents were no longer applied in the copy of the component when the variant was changed by the Size prop.
Now, depending on which option I copy, when I change its size through the prop, its padding value are saved: if I changed the button 56 to the button 48, then both will have a padding of 16px (the value from the first 56-height variant), and if I changed the button is 32 to the button 56, both will have a 6px padding (the value from the first 32-height variant)
