fix: incorrect cursor style for Color Picker & Boolean Toggle

[cloydlau]

• Color Picker should not show cursor: pointer in text-only mode

• Boolean Toggle should show cursor: pointer in non-text-only mode

  I'm not sure if this one is intended. But I decide to make this change after I took a look at Svelte Material UI, Vuetify, etc. Giving cursor: pointer to checkbox should be user friendly.

[josdejong]

Thanks for these improvements!

It is another clear demonstration that we need to refactor how we figure out a readonly and selected styles (needing :global across different components) 😁 .

How about applying the refactoring plan that I mention in #178 (comment) already on BooleanToggle and ColorPicker? In the two svelte components we can add:

<div
  ...
  class:jse-readonly={readOnly}
  ...
>

Then in the CSS of the two components, we can use &.jse-readonly or &:not(.jse-readonly). Then all is local inside the component, no need for :global. What do you think?

[josdejong]

Thanks for a good discussion and thinking along! Merging this PR now

[josdejong]

The fix is published now in v0.9.2, thanks again Cloyd.

[cloydlau]

It's my pleasure.