css variables for width and height do not work

[FluffyDiscord]

I have component like this

<ColorPicker
        bind:hex={highlightColor}
        isAlpha={false}
        isInput={false}
        canChangeMode={false}
        isOpen
        isPopup={false}
        toRight
        components={ChromeVariant}
        style="--picker-height: 110px; --picker-width: 110px;"
/>

but the color picker is still 200px wide and tall, basically the css variables do nothing and I have to force overwrite it using

    :global(div .color-picker .picker-wrapper) {
        height: 110px !important;
        width: 110px !important;
    }

but then the select dot is overflowing the container

[Ennoriel]

I released a new version where the css variables are working! 😄

However, you can't set the css variables that way. You have to define the css variables to one of its parents.