Input type checkbox with class btn has only primary color when checked

[samtvn]

Hello,
I am trying to make a checkbox with text inside so I added this:

<input class="btn btn-outline btn-secondary" type="checkbox" aria-label="test" />

The button is the right color if not checked but when it is, I can only get the primary color.
I tried to add the class checked:bg-secondary but it still does not change

Replica of my settings on stackblitz:
https://stackblitz.com/edit/vitejs-vite-cgzpck?file=src%2FApp.svelte

[saadeghi]

This is not supported yet, because btn-outline apply styles based on btn-secondary colors (because the border and text color should adapt the secondary color if it is a secondary button) and that will override your checked:bg-secondary class.

Until we add the styles to make these class names compatible with checked state, you can add this custom CSS to make it work:
https://play.tailwindcss.com/OK0WdnfJyf?file=css

.btn.btn-secondary:is(input[type="checkbox"]:checked) {
  border-color: oklch(var(--btn-color));
  background-color: oklch(var(--btn-color));
  color: oklch(var(--sc));
}

Let me know if you have a question.