--ds-size-300 design token gets overwritten with "100%"

[arrenleung]

Please verify the version of auro-icon you have installed

4.1.0

Please describe the bug

1. Create an auro-icon instance
2. Assign a width and/or height of "var(--ds-size-300)"
3. In CSS dev tools, see that the --ds-size-300 token is being overwritten with "100%" instead of 1.5rem

Reproducing the error on the docsite

This issue is reproducible on the Auro docsite

Expected behavior

When applying a width/height of var(--ds-size-300) to an auro-icon component, the design token returns 1.5rem.

What browsers are you seeing the problem on?

Chrome, Safari

Additional context

No response

Exit criteria

When applying a width/height of var(--ds-size-300) to an auro-icon component, the design token returns 1.5rem.

[blackfalcon]

@arrenleung can you please supply code and/or screenshots of how you are witnessing this happening?

[jordanjones243]

@arrenleung I also just ran into this issue working on something else. The current workaround is to do a calculation to add up to --ds-size-300. For example, you would do calc(var(--ds-size-200) + var(--ds-size-100))

[blackfalcon]

@jordanjones243 correct me if I am wrong, but is this the issue where the customSize attribute is being used?

@arrenleung if I understand this issue correctly there was an issue where the appropriate tokens were not being referenced within the scope of the icon element causing this issue to appear when also using the customSize attribute.

Can you please confirm if this IS or IS NOT still an issue in your UIs?

[blackfalcon]

If there is no response to this issue from the author within 30 days, this issue will be considered abandoned and it will be closed.