Improve grid handle size and color

docs/getting-started/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Improved `sl-color-picker` grid handle size and color
 - Updated to Popper 2.5.3 to address a fixed position bug in Firefox
 
 ## 2.0.0-beta.20

src/components/color-picker/color-picker.scss

@@ -10,7 +10,7 @@
 :host {
   --grid-width: 260px;
   --grid-height: 200px;
-  --grid-handle-size: 12px;
+  --grid-handle-size: 16px;
   --slider-height: 10px;
   --slider-handle-size: 12px;
 

src/components/color-picker/color-picker.tsx

@@ -644,7 +644,8 @@ export class ColorPicker {
               class="color-picker__grid-handle"
               style={{
                 top: `${y}%`,
-                left: `${x}%`
+                left: `${x}%`,
+                backgroundColor: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%)`
               }}
               role="slider"
               aria-label="HSL"