improve color picker for WHC

docs/resources/changelog.md

@@ -37,6 +37,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-tree>` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963)
 - Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725)
 - Improved `<sl-badge>` to improve padding and render relative to the current font size
+- Improved accessibility of `<sl-color-picker>` so it's usable in forced-colors mode
 - Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962)
 - Updated Lit to 2.4.1
 - Updated Bootstrap Icons to 1.10.2

src/components/color-picker/color-picker.styles.ts

@@ -43,6 +43,7 @@ export default css`
     border-top-left-radius: var(--sl-border-radius-medium);
     border-top-right-radius: var(--sl-border-radius-medium);
     cursor: crosshair;
+    forced-color-adjust: none;
   }
 
   .color-picker__grid-handle {
@@ -81,6 +82,7 @@ export default css`
     height: var(--slider-height);
     border-radius: var(--sl-border-radius-pill);
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    forced-color-adjust: none;
   }
 
   .color-picker__slider:not(:last-of-type) {
@@ -137,6 +139,7 @@ export default css`
     background: none;
     margin-left: var(--sl-spacing-small);
     cursor: copy;
+    forced-color-adjust: none;
   }
 
   .color-picker__preview:before {
@@ -210,6 +213,7 @@ export default css`
     justify-items: center;
     border-top: solid 1px var(--sl-color-neutral-200);
     padding: var(--sl-spacing-small);
+    forced-color-adjust: none;
   }
 
   .color-picker__swatch {
@@ -277,6 +281,7 @@ export default css`
     background-color: transparent;
     border: none;
     cursor: pointer;
+    forced-color-adjust: none;
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--small {