fix(theme): set correct background and text color for panels

[SamVerschueren]

When documenting, I noticed that the --tk-elements-panel-backgroundColor was not used. I'm not entirely sure if I fixed it in all the correct locations. For instance, is the content on the left also a panel? And thus, should the background be impacted by this token? (currently it's not)

I also added a new token to set the default text color of the panel. I figured, if there's a way to specify the background color, there should also be a way to specify the text color. cc @donmckenna We should not forget to add this to figma then.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 078f726

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

[cloudflare-workers-and-pages]

Deploying tutorialkit-docs-page with    Cloudflare Pages

Latest commit:	0f8732f
Status:	✅  Deploy successful!
Preview URL:	https://f1d13ab5.tutorialkit-docs-page.pages.dev
Branch Preview URL:	https://fix-theme-panel-background-a.tutorialkit-docs-page.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying tutorialkit-demo-page with    Cloudflare Pages

Latest commit:	078f726
Status:	✅  Deploy successful!
Preview URL:	https://62a20714.tutorialkit-demo-page.pages.dev
Branch Preview URL:	https://fix-theme-panel-background-a.tutorialkit-demo-page.pages.dev

View logs

[d3lm]

I think I haven't used the panel background because it's was not used in the Figma design. So if we change the system to use the panel background instead of the app background then we need to update the design file as well. Maybe that was just by accident @donmckenna or was there a particular reason to not use the panel background token?

For instance, is the content on the left also a panel?

Personally I would say the left side (tutorial content) is not a panel because it doesn't have a panel header and it's different from the panels we have on the right. So for the left side I'd say that it is not impacted if you'd change the panel background color and instead is impacted when the app background color gets changed.

[d3lm]

LGTM 👍

[SamVerschueren]

To be honest, currently the only thing the app background impacts is the background of the steps that are running like "Booting WebContainer" and running the prepare commands. But the terminal has it's own background, and so does the editor.

[d3lm]

Oh yea? Wait, shouldn't the tutorial content background be impacted as well? At least that's how it's defined in Figma 🤔

[SamVerschueren]

Oh sorry, I was referring to the panel background, my bad.

[Nemikolh]

Nice one!