*UPDATE*: This has been resolved :white_check_mark...

# kilua

[Shubham Singh]

> UPDATE: This has been resolved ✅
Hi friends, is there a way to set a custom pElement (Pseudo Element) in Kilua? My usecase does not fall under the available enum entries.
I want to be able to customise a range (slider) component, make a custom thumb and change the range/track colors, and to do so, I'll probably need to use the -webkit-slider-thumb pseudo element, like this:

// This is a .css file

.slider {
  width: 100px;
}

// This is what I need to achieve using Kilua's Kotlin APIs
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #8758ff;
}

[Robert Jaros]

This should work:

style(".slider") {
    width(100.perc)
}

style(".slider::-webkit-slider-thumb") {
    style("appearance", "none")
    width(20.px)
    height(20.px)
    background(Background(color = Color.hex(0x8758ff)))
}

[Shubham Singh]

Let's say I have this code:

val hoverStyle = dev.kilua.html.style.style(pClass = PClass.Hover) {
    style("scale", "1.5 1.5")
}

val pressStyle = dev.kilua.html.style.style(pClass = PClass.Active) {
    opacity(0.8)
    style("scale", "1.0 1.0")
}

div(className = hoverStyle % pressStyle) {
  ...
}

Where do I provide the .slider className in this case?

[Robert Jaros]

range(className = "slider") {
    ...
}

[Shubham Singh]

And is there a way to merge this name "slider" with the hoverStyle and pressStyle style `className`s I mentioned above?
Something like "slider" % hoverStyle % pressStyle?

[Robert Jaros]

exactly like this

[Robert Jaros]

% operator is defined for String? type

[Robert Jaros]

and style() just returns String values

[Shubham Singh]

Thanks, I just tried out this code and it is not working for me:

range(className = "slider") {
    cursor(Cursor.Pointer)
    flexGrow(1)
    height(4.px)
    marginLeft(8.px)
    marginRight(8.px)
    style("accent-color", Colors.greenButtonBG.value)
    dev.kilua.html.style.style(".slider::-webkit-slider-thumb") {
        style("appearance", "none")
        width(20.px)
        height(20.px)
        background(Background(color = Color.hex(0x8758ff)))
    }
}

Am I doing something incorrect?

[Robert Jaros]

This code works for me, you just need to disable default slider appearance to use customization, like this:

range(className = "slider") {
    cursor(Cursor.Pointer)
    flexGrow(1)
    height(4.px)
    marginLeft(8.px)
    marginRight(8.px)
    style("accent-color", "red")
    style(".slider") {
        style("appearance", "none")
        background(Background(color = Color.hex(0xdddddd)))
    }
    style(".slider::-webkit-slider-thumb") {
        style("appearance", "none")
        width(20.px)
        height(20.px)
        background(Background(color = Color.hex(0x8758ff)))
    }
}

[Robert Jaros]

I'm not sure how it should work, I've just played a bit with this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_rangeslider_pic

[Shubham Singh]

Oh yes it worked for me too ✅ This is interesting 🤔 wasn't so obvious for me to figure out.. maybe these are just newbie issues 😄

Nevertheless, thank you for the help as always 🙌

[Robert Jaros]

Btw I would probably move style(".slider") and style(".slider::-webkit-slider-thumb") calls out of the range component. These functions create global stylesheets and keeping them inside a component may lead to wrong assumptions the styles are somehow its descendants (or even errors if you would extract the range to some reusable component).

[Shubham Singh]

Thanks for the tip!

Btw, is there a way to avoid having to rely on these "global stylesheets" and create this style locally just for this component?

[Robert Jaros]

No, currently there is no concept of local stylesheets. But you can fill an issue.

[Shubham Singh]

Awesome! Will do.. thank you

[Shubham Singh]

✅ Created https://github.com/rjaros/kilua/issues/18

[Robert Jaros]

What do you think about this?

range {
    cursor(Cursor.Pointer)
    flexGrow(1)
    height(4.px)
    marginLeft(8.px)
    marginRight(8.px)
    style("accent-color", "red")
    appliedStyle {
        style("appearance", "none")
        background(Color.hex(0xdddddd))
        pElement("-webkit-slider-thumb") {
            style("appearance", "none")
            width(20.px)
            height(20.px)
            background(Color.hex(0x8758ff))
        }
    }
}

[Robert Jaros]

The generated css is of course still global (all styles are global in HTML), but it has unique, generated selector which is automatically applied to the component. I've also implemented support for custom pseudo classes and pseudo elements.

[Robert Jaros]

I'm not yet sure about the name. I'm considering appliedStyle, localStyle, componentStyle, but also making it style and changing the current function to globalStyle. I'm open to suggestions.

[Shubham Singh]

I feel like since the interface TagStyleFun only contains a single function named style with no other overloads, the new function could just be an overload that only accepts a lambda.

It would make it easier for new users to find this API

[Robert Jaros]

It's not a problem with style(String, String) method. It's a problem with current global function style(), which declares global stylesheet and new ITag<E>.appliedStyle() extension function. They can't have the same name, because they are ambiguous for the compiler.

[Shubham Singh]

In that case, I like your idea of renaming the global style function to globalStyle and calling the new function style only instead of appliedStyle ✅

[Shubham Singh]

local should automatically be inferred since the users are working in a Compose environment

And the term global should be explicit here