Fix Calendar Block Color options are not working properly

[dhananjaykuber]

Fixes #61346

What?

This PR fixes an issue with the Calendar Block where color changes (text and background) were not immediately reflected in the editor view.

Why?

Previously, when users changed the text or background color of the Calendar Block, the changes were only visible after a page refresh or in the front-end preview. This inconsistency created a poor user experience and made it difficult for users to visualize their changes in real-time.

How?

1. Restructuring CSS to ensure color changes are applied consistently in the editor
2. Improving the handling of text and background color classes

Testing Instructions

1. Open the block editor and add a Calendar Block
2. Open the block settings in the sidebar
3. Change the text color of the Calendar Block
4. Verify that the text color change is immediately visible in the editor
5. Change the background color of the Calendar Block
6. Verify that the background color change is immediately visible in the editor
7. Save the post and view it on the front-end to ensure changes are applied correctly there as well

Screenshots or screencast

https://www.loom.com/share/055937c227674e46902d4abbe4ba3ac0?sid=cea7abb7-83e7-44ae-9bb8-4f6e42b28853

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: pitamdey <pitamdey@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.