fix(ui5-color-picker): keep pointer aligned at any root font-size

[hinzzx]

Overview

When the HTML root font-size was anything other than 16px, the ColorPicker's draggable circle drifted outside the saturation/lightness box and the picked color value became incorrect (e.g. the bottom-right corner no longer produced #ffffff). The picker box is sized in rem, but the JS positioning math hardcoded 256 pixels (= 16rem at 16px root), so the two went out of sync at any other root font-size.

Fixes #13521.

What We Did

• Rewrote how the marker circle is placed inside the color square so it always lines up with where the user clicks, no matter the website's text size
• Verified the fix works the same way across every available theme (light, dark, high-contrast variants) and in both regular and compact display modes
• Added automated tests that re-create the original problem and confirm it stays fixed in the future
• Improved the developer playground page so it's easy to try the Color Picker at different text sizes, themes, and display modes

What This Fixes

• Reliable color selection - the chosen color now always matches what the user clicked, on any website
• Works everywhere - the fix works the same in every theme and display mode the library supports

Before

After

[ui5-webcomponents-bot]

🚀 Deployed on https://pr-13563--ui5-webcomponents-preview.netlify.app