fix(blocks): text colors are not saved when importing to html

[OlegDev1]

Related issue #8479. I know this issue was assigned to @donteatfriedrice, so if he is currently working on it, feel free to close this PR.

When exporting to HTML, text color and text background color are not preserved.
Affine document:

Exported HTML:

Changes

Text with color or background color is now wrapped into a span with necessary color. Previously, colors were not supported

Problem

Although I have encountered a problem. Colors passed to a wrapping span are stored in css variables. There are no css variables in the html, which still leads to no colors in html. See the screenshots below
Before:

After:

Question

Should i convert the colors on the go, or better add missing css variables to html? What will you recommend? Any feedback will be highly appreciated!

[changeset-bot]

⚠️ No Changeset found

Latest commit: df53417

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 5:54pm

[graphite-app]

How to use the Graphite Merge Queue

Add the label merge to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[vercel]

@OlegDev1 is attempting to deploy a commit to the toeverything Team on Vercel.

A member of the Team first needs to authorize it.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit df53417.

Command	Status	Duration	Result
nx vite:build @blocksuite/playground	✅ Succeeded	30s	View ↗

---

☁️ Nx Cloud last updated this comment at 2024-12-20 17:55:16 UTC