Move css vars from body style tag to separate style node

[ernstmul]

What does this PR do?

• Moves the css variables from the body style attribute to separate style node

Have you read the Contributing Guidelines on issues?

✅

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pink-design	❌ Failed (Inspect)			Sep 3, 2024 2:34pm
ui-kitchensink	❌ Failed (Inspect)			Sep 3, 2024 2:34pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 25b5173

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[TorstenDittmann]

I think this will be creating a style element each time this is triggered.

Maybe we can try and use the <svelte:head /> special element.

<svelte:head>
	<style>{style}</style>
</svelte:head>