feat: backgroundPresets add contrast color

[faga295]

Description

#328 provide a --contrast-test-color css variable, it will change with background color.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• If it's a new feature, provide a convincing reason to add it. Ideally, you should open a suggestion issue first and have it approved before working on it.
• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	ab457ad
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/6358fa5c5fe6fe00093251e5
😎 Deploy Preview	https://deploy-preview-335--histoire-examples-svelte3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	42c7e60
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/6358f41d0f22770008a70a23
😎 Deploy Preview	https://deploy-preview-335--histoire-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	ab457ad
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/6358fa5b3317ba0009a97b06
😎 Deploy Preview	https://deploy-preview-335--histoire-controls.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	ab457ad
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/6358fa5b33182f0009e814b2
😎 Deploy Preview	https://deploy-preview-335--histoire-examples-vue3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[faga295]

now it can be used in iframe, and added some cypress tests