webrecorder
Unify Buttons & navigation buttons across the app
cc @Shrinks99 for your thoughts on buttons/navigation buttons
Right now we've got shoelace buttons, btrix buttons, and btrix navigation buttons used across the app. We should unify all three use cases into a single button probably? I think the use cases align well enough, and that'll allow us to consolidate styles too.
Quick look through the app and I don't see anything we're doing in button or navigation-button that shoelace buttons don't offer in functionality. My vote would be to create a button stylesheet that we can import in the theming stylesheet and customize sl-button there. We could add additional styling for states that shoelace doesn't support based on attributes we should be setting regardless, likearia-pressed for toggle.
I'd also like to assess when and why we need raised buttons. If we don't want to roll it into a variant, we could probably handle shadows with the tailwind utility class that retargets shoelace button parts, something like (untested):
sl-button.shadow {
box-shadow: none;
}
sl-button.shadow::part(base) {
box-shadow: theme(boxShadow.DEFAULT);
}
Maybe it's a bit verbose, but might be worth it if we can deduplicate button functionality by getting rid of the custom components?
