After changing the color value of the button, if you change the size, an unknown color value appears.

Ask the community
1

I am managing the button color and size values ​​by creating them as components.

After changing the color value of the button, if you change the size from l → m, an unknown color value appears.

Is this a bug? What did I do wrong?

The sky blue color is not found anywhere in our design system.I am managing the button color and size values ​​by creating them as components. After changing the color value of the button, if you change the size from l → m, an unknown color value appears. Is this a bug? What did I do wrong? The sky blue color is not found anywhere in our design system.

스크린샷 2024-09-19 오후 4.14.04
스크린샷 2024-09-19 오후 4.14.04728×1108 43 KB

2

what is the hex color on the Fill of the skyblue? Have you tried reimporting the button from the DS directly again and re-do those steps again and see if the sky blue persists? What is the color of the variant on the DS?

3

skyblue : #00ABFF
original : #4263EB
Even after reimporting the master component, the same issue occurs, and it only happens with the L size component.

4

What is the color of the L size variant in the component? This might be a bug or there’s something wrong with the layering.

5

I only use two colors for the variant: default(#4263eb), disable(#25304a)

스크린샷 2024-09-20 오전 11.11.25
스크린샷 2024-09-20 오전 11.11.25262×582 3.91 KB

One thing I discovered is that the colors are being used in other libraries I referenced, but I still don’t understand why this color is appearing.

6

If you use that component, it will retain the color of it if the layering is not correct.

So, you have to check the layers of the component and it’s variant if they are the same layer name and same nesting. So once you’ve changed the value of the instance and change variant, it would retain your values.

7

All layers and nesting are identical. So is this a bug?

8

Yes. That may be a bug, not sure since i can’t check.

But it should preserve overrides if nesting is correct like this:

9

Thank you for your kindness.

I’ve also prepared a screen recording video just for you.
The layers of the instance are completely identical to those of the master component. From what I can see, there doesn’t seem to be an issue with the layers, but I’m not sure why that light blue color is appearing. I’d appreciate it if you could double-check please.