fix: incorrect cursor style for ColorPicker & BooleanToggle (#184)

* fix: Color Picker should not show `cursor: pointer` in text-only mode

* fix: Boolean Toggle should show `cursor: pointer` in non-text-only mode

* refactor: add class `jse-readonly` to Color Picker & Boolean Toggle to avoid using `:global` in local style

* style: padding is included in the clickable area of `.jse-boolean-toggle`

src/lib/plugins/value/components/BooleanToggle.scss

@@ -7,3 +7,7 @@
   padding-top: 1px;
   height: var(--jse-line-height);
 }
+
+.jse-boolean-toggle:not(.jse-readonly) {
+  cursor: pointer;
+}

src/lib/plugins/value/components/BooleanToggle.svelte

@@ -34,6 +34,7 @@
 
 <div
   class="jse-boolean-toggle"
+  class:jse-readonly={readOnly}
   on:mousedown={toggleBooleanValue}
   title={!readOnly ? 'Click to toggle this boolean value' : `Boolean value ${value}`}
 >

src/lib/plugins/value/components/ColorPicker.scss

@@ -14,5 +14,8 @@
   border-radius: 2px;
   background: inherit;
   outline: none;
+}
+
+.jse-color-picker-button:not(.jse-readonly) {
   cursor: pointer;
 }

src/lib/plugins/value/components/ColorPicker.svelte

@@ -69,6 +69,7 @@
 <button
   type="button"
   class="jse-color-picker-button"
+  class:jse-readonly={readOnly}
   style="background: {color}"
   title={!readOnly ? 'Click to open a color picker' : `Color ${value}`}
   on:click={openColorPicker}